Looping through an array of JSON objects in Javascript

Question

I orginally was going to ask a question on why it wasn't working. But as I commented the code I realized that I could access the text array style and item was giving me the index. It took me a while to find this as the solution, however I would have much rather used item.text in the for loop. Is this [my posted answer] the valid way to loop through JSON objects in Javascript?

Answer 1

There's no such thing as a JSON object - once you've parsed your JSON (which is a string) you end up with simply an object. Or an array.

Anyway, to loop through an array of objects, use a traditional for loop. A for..in loop may work, but is not recommended because it may loop through non-numeric properties (if somebody has been messing with the built-in array).

In your specific case, if obj.body.items is an array then do this:

for (var i = 0; i < obj.body.items.length; i++) {
    // obj.body.items[i] is current item
    console.log(obj.body.items[i].text);
}

You can also, arguably, make the code a bit neater by keeping a reference directly to the array rather than accessing it via the whole obj.body. chain every time:

var items = obj.body.items;
for (var i = 0; i < items.length; i++) {
    console.log(items[i].text);
}

"I would have much rather used item.text in the for loop"

In your answer - which really should've been posted as part of the question - because you are using a for..in loop your item variable is being set to each index in turn as a string, eg, on the first iteration it will be the string "0" , and strings don't have a text property so item.text doesn't work - although it should give you undefined , not null . But you can do this:

var item;
for (var i = 0; i < obj.body.items.length; i++) {
    item = obj.body.items[i] // get current item
    console.log(item.text);  // use current item
}

That is, declare a variable called item that you set to reference the current array item at the beginning of each loop iteration.

Answer 2

    <script type="text/javascript">
    ...   
    obj = JSON.parse(xmlhttp.responseText);
    // displays the object as expected
    console.log(obj);
    // display the string next as expected
    console.log(obj.body.next);
    // displays the text of the item as expected
    console.log(obj.body.items[0].text);
    for (var item in obj.body.items) {
    // displays the index value of the item
        console.log(item);
    // displays null - WHAT?? HUH?
        console.log(item.text);
    // displays the text - finally
        console.log(obj.body.items[item].text);
    }
    <script>