Weather App help. I keep getting "undefined" when trying to get weather icon from the API

1

I am able to grab all the other data but for some reason the icon keeps coming back as undefined.

Here is the code used to grab the info from the API and match it with elements in the html.

function getWeather(lat, lon) {
	var urlString = api + lat + "&" + lon; 
	$.ajax({
		url: urlString,
		success: function(result) {
			$("#temp").text(result.main.temp);
			$("#city").text(result.name);
			$("#country").text(result.sys.country);
			$("#desc").text(result.weather[0].main);
			$("#showIcon").html('<img src="http://openweathermap.org/img/w/' + result.weather[0].icon + '.png">');
		}
	});
}

When I inspect the page in the dev console the img src of the icon is http://openweathermap.org/img/w/undefined.png

Why does result.weather[0].icon not return the data from the API like result.weather[0].main does?

4

It looks like weather[0] doesn’t have an icon property. In the response snippet below, at some point, weather[0] was the one with id: 701, and that didn’t have an icon property either. id: 701 only gained an icon property when id: 600 was added.

weather: [
{
id: 600,
main: "Snow",
description: "light snow"
},
{
id: 701,
main: "Mist",
description: "mist",
icon: "50d"
},
{
id: 501,
main: "Rain",
description: "moderate rain",
icon: "10d"`Preformatted text`
}
],

Also, the value of the icon property is different than the example’s.

5

Hi all,

I’m a little confused about the weather API’s icon property (weather[0].icon). For some locations I get the path to a PNG icon, but for others, the icon property doesn’t exist.

For example, the JSON I received (below) doesn’t have an icon property for weather[0], but there’s one for weather[1]. At some point, the weather array started at id: 600, and that didn’t have an icon property either.

{
  coord: {
    lon: -74,
    lat: 40.7
  },
  weather: [
    {
      id: 701,
      main: "Mist",
      description: "mist"
    },
    {
    id: 600,
      main: "Snow",
      description: "light snow",
      icon: "13d"
    },
    {
      id: 500,
      main: "Rain",
      description: "light rain",
      icon: "10d"
    }
. . .

Has anyone else encountered a similar problem?

7

What is “the API”? Where can we find its documentation?

8

The freeCodeCamp weather API can be found here. Documentation seems somewhat limited…

9

Hmm… Seems like whatever bug has been fixed. weather[0].icon returns a link to a PNG icon.