$.getJSON() API problems on the 'Show the Local Weather' challenge

#1

Here’s my code pen

The issue I’m running into is with the getJSON success handler: I’m trying to display the weather icon from the JSON response. Here is my JS:

$(document).ready(function() {

var lat;
var lon;
  
function getLocation() {
navigator.geolocation.getCurrentPosition(function(position) {   
     lat = position.coords.latitude;
     lon = position.coords.longitude;
  
$.getJSON("https://fcc-weather-api.glitch.me/api/current?lat=" + lat + "&lon=" + lon, function(json) {
$(".Main").html('<img src="' + json.weather[0].icon + '" />');
        }); 
     });                             
   };
  getLocation();
});

The getJSON request appears to be successful because if I use the success handler below, I am able to display the raw JSON data on the page:

function(json) {
  $(".Main").html(JSON.stringify(json));

Is there a syntax issue I’m missing? Any help would be appreciated.

Cheers,
rmallory

#2

You should be using:

json.weather[1].icon

instead of:

json.weather[0].icon

because the icon property is located in the second element object. Be aware that sometimes the icon value is not an image src, but instead is a code like “50d”. You can refer to the following link of the API documentation for information regarding these icon codes.

https://openweathermap.org/weather-conditions

1 Like
#3