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

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 + '" />');

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) {

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


You should be using:


instead of:


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.


1 Like