How to display the weather icon from Open Weather Map in Javascript

Question

So I been working on a class project using the public API from Open Weather Map (https://openweathermap.org/api).

I could get the temperature value but can't seem to display the icons. I read the documentation but don't understand it.

CODE

<input id="city">
<button id="getWeatherForcast">GET WEATHER</button>
<div class="ShowWeatherForcast"></div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#getWeatherForcast").click(function() {

      var city = $("#city").val();
      var key = '4de3768c62b67fe359758977a3efc069';

      $.ajax({
        url: 'http://api.openweathermap.org/data/2.5/weather',
        dataType: 'json',
        type: 'GET',
        data: {
          q: city,
          appid: key,
          units: 'metric'
        },
        success: function(data) {
          var wf = '';
          $.each(data.weather, function(index, val) {

            wf += '<p><b>' + data.name + "</b><img src=" + val.icon + ".png></p>" + data.main.temp + '&deg;C ' +
              ' | ' + val.main + ", " + val.description

          });

          $(".ShowWeatherForcast").html(wf);
        }
      })
    });
  });
</script>

This is the page for the icon ( https://openweathermap.org/weather-conditions ) — Muhd Syahiran Ahmad Shahar, Jan 15 '20 at 03:20
Did you close this question because of the downvote or because you found your solution? — BlueWater86, Jan 15 '20 at 03:38
No i didn't. Someone else did it and associated with another question. But the other question uses array and i tried the solution it didn't work — Muhd Syahiran Ahmad Shahar, Jan 15 '20 at 03:40
That other answer does solve your problem. Where you are creating the image `"...` you need to add the rest of the URL. You could use a function to generate the URL `const getIconUrl = icon => "http://openweathermap.org/img/wn/" + icon + "@2x.png"` — BlueWater86, Jan 15 '20 at 03:44
so just create a constant for the image url later add the constant in the img src = " " ? — Muhd Syahiran Ahmad Shahar, Jan 15 '20 at 04:29

How to display the weather icon from Open Weather Map in Javascript

0 Answers0