JSON for OpenWeatherMap API

Question

I am writing a simple one page weather app using the Openweathermap API, but I am encountering an issue looping through the nested JSON objects returned.

Here is a sample of the JSON:

"cod":"200",
"message":0.1986,
"city":{
    "id":"4781530",
    "name":"Reston",
    "coord":{
        "lon":-77.3545,
        "lat":38.9597
    },
    "country":"United States of America",
    "population":0
},
"cnt":2,
"list":[
    {
        "dt":1416499200,
        "temp":{
            "day":45.3,
            "min":33.48,
            "max":52,
            "night":34.47,
            "eve":50.59,
            "morn":33.48
        },
        "pressure":1015.56,
        "humidity":58,
        "weather":[
            {
                "id":801,
                "main":"Clouds",
                "description":"few clouds",
                "icon":"02d"
            }
        ],
        "speed":9.07,
        "deg":212,
        "clouds":24
    },
    {
        "dt":1416585600,
        "temp":{
            "day":33.04,
            "min":20.55,
            "max":38.86,
            "night":22.87,
            "eve":38.03,
            "morn":24.42
        },
        "pressure":1027.28,
        "humidity":50,
        "weather":[
            {
                "id":800,
                "main":"Clear",
                "description":"sky is clear",
                "icon":"01d"
            }
        ],
        "speed":7.99,
        "deg":301,
        "clouds":0
    }
]

}

I am able to successfully loop through the first set of values in obj.list but I get an undefined error when it reaches the $.each(obj.list[i].weather[i], function(key,value) loop.

How would I loop through the nested weather and temp objects, and why does my current code given me an undefined error? I have included the code and Firebug console log. Any help with be greatly appreciated.

jQuery loop function

$.each(obj.list, function(i) {
    $.each(obj.list[i], function(key,value) {

        if(typeof value == "object"){
            console.log(key + " is an Object!!");

            if(key=="weather"){
                            console.log("What is i? " + i );
                            console.log(obj.list[i].weather[i]);

                            $.each(obj.list[i].weather[i], function(key,value) {
                                    console.log("weather object " + key + ": " + value );
                            });
            }

        }
        else{
            console.log("outer object " + key + ": " + value );
        }
    });
});

Firebug console log:

outer object dt: 1416499200
scripts.js (line 72)
temp is an Object!!
scripts.js (line 49)
outer object pressure: 1015.56
scripts.js (line 72)
outer object humidity: 58
scripts.js (line 72)
weather is an Object!!
scripts.js (line 49)
What is i? 0
scripts.js (line 59)
Object { id=801, main="Clouds", description="few clouds", more...}
scripts.js (line 60)
weather object id: 801
scripts.js (line 66)
weather object main: Clouds
scripts.js (line 66)
weather object description: few clouds
scripts.js (line 66)
weather object icon: 02d
scripts.js (line 66)
outer object speed: 9.07
scripts.js (line 72)
outer object deg: 212
scripts.js (line 72)
outer object clouds: 24
scripts.js (line 72)
***********
scripts.js (line 103)
outer object dt: 1416585600
scripts.js (line 72)
temp is an Object!!
scripts.js (line 49)
outer object pressure: 1027.28
scripts.js (line 72)
outer object humidity: 50
scripts.js (line 72)
weather is an Object!!
scripts.js (line 49)
What is i? 1
scripts.js (line 59)
undefined

Answer 1

You're asking for only the ith element from each obj.list[i].weather list. You should loop over obj.list[i].weather, instead of asking for a single element from it. So, for obj.list[0], you ask only for obj.list[0].weather[0]. For obj.list[1], you ask only for obj.list[1].weather[1], which doesn't exist (that weather list only has a single object, at index 0).

Your $.each(obj.list[i].weather[i], ...) loops over obj.list[i].weather[i], but you don't loop over obj.list[i].weather. You want something with two different looping variables, like obj.list[i].weather[j], not obj.list[i].weather[i].

    if(typeof value == "object"){
        console.log(key + " is an Object!!");

        if(key=="weather"){
                console.log("What is i? " + i );

                $.each(obj.list[i].weather, function(j) {
                    console.log(obj.list[i].weather[j]);
                    $.each(obj.list[i].weather[j], function(key,value) {
                        console.log("weather object " + key + ": " + value );
                    });
                });
        }

    }

Here, we add a loop over obj.list[i].weather with the inner loping variable j so that we get all of the items in each weather list, instead of only one..