[FIXED] How to display OpenWeatherMap icons in weather application?

Issue

I'm trying to display weather icons from OpenWeatherMap in my weather application using JavaScript.

I've tried using jQuery and other solutions I've seen online. I've also tried specifying this link ("http://openweathermap.org/img/w/") using the "src" attribute, but the link doesn't work and the image is broken as a result.

How do I successfully add weather icons to my application?

Here is some minimal code used to formulate this problem. I hope this helps.

HTML:

<div class="weather">
  <div id="date"></div>
  <div id="cityName"></div>
  <img src="" id="icon">
  <div id="temp"></div>
  <div id="description"></div>
</div>

JavaScript:

var d = new Date();
var n = d.toLocaleDateString();
document.getElementById("date").innerHTML = n;

function getWeather( cityID ) {
  var key = '535f8a50b4bc24608c72fcde2aecb52b';
  fetch('https://api.openweathermap.org/data/2.5/weather?id=' + cityID+ '&appid=' + key)  
  .then(function(resp) { return resp.json() }) 
  .then(function(data) {
    drawWeather(data);
  })
  .catch(function() {
    // catch any errors
  });
}

window.onload = function() {
  getWeather( 6167865 );
}

function drawWeather( d ) {
  var celcius = Math.round(parseFloat(d.main.temp)-273.15);
  var fahrenheit = Math.round(((parseFloat(d.main.temp)-273.15)*1.8)+32); 

  document.getElementById('cityName').innerHTML = d.name;
  document.getElementById('description').innerHTML = d.weather[0].description;
  document.getElementById('temp').innerHTML = fahrenheit + '°';
  document.getElementById('icon').src = "http://openweathermap.org/img/w/"+obj.weather[0].icon+".png";
 }

Solution

Replace d.weather[0].icon with existing one when you set url in image src property.

var d = new Date();
var n = d.toLocaleDateString();
document.getElementById("date").innerHTML = n;

function getWeather( cityID ) {
  var key = '535f8a50b4bc24608c72fcde2aecb52b';
  fetch('https://api.openweathermap.org/data/2.5/weather?id=' + cityID+ '&appid=' + key)  
  .then(function(resp) { return resp.json() }) 
  .then(function(data) {
    drawWeather(data);
  })
  .catch(function() {
    // catch any errors
  });
}

window.onload = function() {
  getWeather( 6167865 );
}

function drawWeather( d ) {
  var celcius = Math.round(parseFloat(d.main.temp)-273.15);
  var fahrenheit = Math.round(((parseFloat(d.main.temp)-273.15)*1.8)+32); 

  document.getElementById('cityName').innerHTML = d.name;
  document.getElementById('description').innerHTML = d.weather[0].description;
  document.getElementById('temp').innerHTML = fahrenheit + '°';
  document.getElementById('icon').src = `http://openweathermap.org/img/w/${d.weather[0].icon}.png`;
 }

<div class="weather">
  <div id="date"></div>
  <div id="cityName"></div>
  <img src="" id="icon">
  <div id="temp"></div>
  <div id="description"></div>
</div>

Answered By - Rahul Kumar

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)