How to loop through JSON object together with an if-statement?

Question

This is the JSON object:

{
    "temperatures": {
        "city": [{
            "name": "Riyadh",
            "high": [35, 38, 32]
        }, {
            "name": "New York",
            "high": [28, 36]
        }, {
            "name": "Dubai",
            "high": [18, 20]
        }]
    }
}

On page load I get the object via AJAX. I need to loop through each city and get the name of the city and the high array as well.

This is the page code:

<html>

    <head>
        <title>the title</title>

        <script type="text/javascript" src="tempj.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {

            $.getJSON('temp.json', function(data) {
                alert('<ul><li>'+ jd.city.name +':'  + jd.high + '</ul> ');
            });
        });
        </script>

    </head>

    <body>
    </body>

</html>

http://stackoverflow.com/questions/1078118/how-to-iterate-over-a-json-structure and http://stackoverflow.com/questions/2342371/jquery-loop-on-json-data-using-each might help u — run, Nov 04 '11 at 05:48

score 3 · Answer 1 · answered Nov 04 '11 at 05:52

I don't know what you mean in your question title about using an if statement, so I'm ignoring that.

Within your JSON, data.temperatures.city is an array of objects each of which has two properties, one for the city name and one an array of highs. I have no idea how you want to handle the fact that the highs arrays have different lengths, so I've just used the .join() method to form them into a comma-separated string on the end of the message in the alert.

Presumably you don't really want to pop up a bunch of alerts, but at least that's a starting place to see that you're getting the data you expect so the following should be enough to get you going:

$.getJSON('temp.json', function(data) {
   for (var i = 0; i < data.temperatures.city.length; i++) {
      alert("The temperatures in " + data.temperatures.city[i].name + " are "
            + data.temperatures.city[i].high.join(","));
   }
});

I deliberately didn't use $.each() so that for learning purposes you can see what's going on. Obviously you can convert this to use $.each() if you prefer.

You should add error checking that the properties you are trying to use actually exist (i.e., that the JSON is in the expected format).

jfriend00 · Answer 2 · 2011-11-04T06:01:49.380

You can reach into the data to get to the city array and then loop through the city array to get the properties of each element in that array like this:

var data = {
    "temperatures": {
        "city": [{
            "name": "Riyadh",
            "high": [35, 38, 32]
        }, {
            "name": "New York",
            "high": [28, 36]
        }, {
            "name": "Dubai",
            "high": [18, 20]
        }]
    }
}

var cityArray = data.temperatures.city;
for (var i = 0; i < cityArray.length; i++) {
    // cityArray[i].name   (name of city)
    // cityArray[i].high   (array of high values for that city)
}

score 0 · Answer 3 · edited Nov 04 '11 at 05:51

0

if you are using jQuery you can loop through the json elements as

jQuery.getJSON('js/jsonTest.js',function(data) {
    $.each(data, function(key, val) {
        if (key == 'general') { 
            // code here
        } 
     }
}

edited Nov 04 '11 at 05:51

jfriend00

683,504
96
985
979

answered Nov 04 '11 at 05:37

sushil bharwani

29,685
30
94
128

thanks alot but I want the name of each city and the high display,, the parameter of val and key refers to what ? – proR Nov 04 '11 at 05:46
the val parameter refers to the actual value of the variables inside your JSON object, and the key refers to the index of that value inside your JSON object – ElHacker Nov 04 '11 at 05:54

How to loop through JSON object together with an if-statement?

3 Answers3