Referencing Properties While Iterating Through JSON Array

Question

I'm trying to use Javascript to iterate through a JSON array provided by an HTTP request and I can't seem to figure out why this isn't giving me the properties that I'm looking for. i.id is returning "undefined"; why would it not return whatever each id property is in the object it iterates through?

Javascript:

if (xhr.readyState == 4 && xhr.status == 200) {
        var response = JSON.parse(xhr.responseText)
        //alert(xhr.responseText);
        allComps = "";
        for (var i in response) {
            allComps += i.id;
            allComps += ", ";
        }
        document.getElementById("response").innerHTML = allComps;
  }

JSON:

[
{
    "id": 394,
    "caption": "1. Bundesliga 2015/16",
    "league": "BL1",
    "year": "2015",
    "numberOfTeams": 18,
    "numberOfGames": 306,
    "lastUpdated": "2015-10-25T19:06:29Z"
},
{
    "id": 395,
    "caption": "2. Bundesliga 2015/16",
    "league": "BL2",
    "year": "2015",
    "numberOfTeams": 18,
    "numberOfGames": 306,
    "lastUpdated": "2015-10-25T19:06:59Z"
},
{
    "id": 396,
    "caption": "Ligue 1 2015/16",
    "league": "FL1",
    "year": "2015",
    "numberOfTeams": 20,
    "numberOfGames": 380,
    "lastUpdated": "2015-10-26T07:40:20Z"
},
{
    "id": 397,
    "caption": "Ligue 2 2015/16",
    "league": "FL2",
    "year": "2015",
    "numberOfTeams": 20,
    "numberOfGames": 380,
    "lastUpdated": "2015-10-27T08:15:17Z"
},
{
    "id": 398,
    "caption": "Premier League 2015/16",
    "league": "PL",
    "year": "2015",
    "numberOfTeams": 20,
    "numberOfGames": 380,
    "lastUpdated": "2015-10-25T19:08:18Z"
},
{
    "id": 399,
    "caption": "Primera Division 2015/16",
    "league": "PD",
    "year": "2015",
    "numberOfTeams": 20,
    "numberOfGames": 380,
    "lastUpdated": "2015-10-27T08:14:21Z"
},
{
    "id": 400,
    "caption": "Segunda Division 2015/16",
    "league": "SD",
    "year": "2015",
    "numberOfTeams": 22,
    "numberOfGames": 462,
    "lastUpdated": "2015-10-26T07:40:01Z"
},
{
    "id": 401,
    "caption": "Serie A 2015/16",
    "league": "SA",
    "year": "2015",
    "numberOfTeams": 20,
    "numberOfGames": 380,
    "lastUpdated": "2015-10-30T07:08:40Z"
},
{
    "id": 402,
    "caption": "Primeira Liga 2015/16",
    "league": "PPL",
    "year": "2015",
    "numberOfTeams": 18,
    "numberOfGames": 306,
    "lastUpdated": "2015-10-27T08:14:41Z"
},
{
    "id": 403,
    "caption": "3. Bundesliga 2015/16",
    "league": "BL3",
    "year": "2015",
    "numberOfTeams": 20,
    "numberOfGames": 380,
    "lastUpdated": "2015-10-25T19:07:17Z"
},
{
    "id": 404,
    "caption": "Eredivisie 2015/16",
    "league": "DED",
    "year": "2015",
    "numberOfTeams": 18,
    "numberOfGames": 306,
    "lastUpdated": "2015-10-25T19:12:52Z"
},
{
    "id": 405,
    "caption": "Champions League 2015/16",
    "league": "CL",
    "year": "2015",
    "numberOfTeams": 32,
    "numberOfGames": 96,
    "lastUpdated": "2015-10-21T21:01:58Z"
}
]

Don't use `for/in` to iterate over an array. Use a normal `for` loop instead (or use `for/of`). Also, have a look at the [documentation of `for/in`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in) to learn what it does. — Felix Kling, Dec 12 '16 at 08:20

score 0 · Answer 1 · answered Dec 12 '16 at 07:49

0

i is actually the index in this case, you have to use response[i].

    for (var i in response) {
        allComps += response[i].id + ", ";
    }

answered Dec 12 '16 at 07:49

Adrian Ber

20,474
12
67
117

nicovank · Accepted Answer · 2016-12-12T07:57:21.887

0

Using for...in iterates through the keys of the object. In your case, 0, 1, 2, and so on.

To fix this issue, you can either use for...of or use response[i]

Examples

 for (let i of response) {
     // Here you can use i.id
 }

 for(let i in response) {
     // Here you can use response[i].id
 }

edited Dec 12 '16 at 07:57

answered Dec 12 '16 at 07:52

nicovank

3,157
1
21
42

score 0 · Answer 3 · answered Dec 12 '16 at 08:17

These changes you have to made in your code :

Instead of using i.id use response[i].id as i is the index and it will always work with an array.

Modified code :

for (var i in response) {
            allComps += response[i].id;
            allComps += ", ";
        }

Before using JSON.parse make sure that your response data should be a JSON string.

Working demo :

var response = [
{
    "id": 394,
    "caption": "1. Bundesliga 2015/16",
    "league": "BL1",
    "year": "2015",
    "numberOfTeams": 18,
    "numberOfGames": 306,
    "lastUpdated": "2015-10-25T19:06:29Z"
},
{
    "id": 395,
    "caption": "2. Bundesliga 2015/16",
    "league": "BL2",
    "year": "2015",
    "numberOfTeams": 18,
    "numberOfGames": 306,
    "lastUpdated": "2015-10-25T19:06:59Z"
},
{
    "id": 396,
    "caption": "Ligue 1 2015/16",
    "league": "FL1",
    "year": "2015",
    "numberOfTeams": 20,
    "numberOfGames": 380,
    "lastUpdated": "2015-10-26T07:40:20Z"
},
{
    "id": 397,
    "caption": "Ligue 2 2015/16",
    "league": "FL2",
    "year": "2015",
    "numberOfTeams": 20,
    "numberOfGames": 380,
    "lastUpdated": "2015-10-27T08:15:17Z"
},
{
    "id": 398,
    "caption": "Premier League 2015/16",
    "league": "PL",
    "year": "2015",
    "numberOfTeams": 20,
    "numberOfGames": 380,
    "lastUpdated": "2015-10-25T19:08:18Z"
},
{
    "id": 399,
    "caption": "Primera Division 2015/16",
    "league": "PD",
    "year": "2015",
    "numberOfTeams": 20,
    "numberOfGames": 380,
    "lastUpdated": "2015-10-27T08:14:21Z"
},
{
    "id": 400,
    "caption": "Segunda Division 2015/16",
    "league": "SD",
    "year": "2015",
    "numberOfTeams": 22,
    "numberOfGames": 462,
    "lastUpdated": "2015-10-26T07:40:01Z"
},
{
    "id": 401,
    "caption": "Serie A 2015/16",
    "league": "SA",
    "year": "2015",
    "numberOfTeams": 20,
    "numberOfGames": 380,
    "lastUpdated": "2015-10-30T07:08:40Z"
},
{
    "id": 402,
    "caption": "Primeira Liga 2015/16",
    "league": "PPL",
    "year": "2015",
    "numberOfTeams": 18,
    "numberOfGames": 306,
    "lastUpdated": "2015-10-27T08:14:41Z"
},
{
    "id": 403,
    "caption": "3. Bundesliga 2015/16",
    "league": "BL3",
    "year": "2015",
    "numberOfTeams": 20,
    "numberOfGames": 380,
    "lastUpdated": "2015-10-25T19:07:17Z"
},
{
    "id": 404,
    "caption": "Eredivisie 2015/16",
    "league": "DED",
    "year": "2015",
    "numberOfTeams": 18,
    "numberOfGames": 306,
    "lastUpdated": "2015-10-25T19:12:52Z"
},
{
    "id": 405,
    "caption": "Champions League 2015/16",
    "league": "CL",
    "year": "2015",
    "numberOfTeams": 32,
    "numberOfGames": 96,
    "lastUpdated": "2015-10-21T21:01:58Z"
}
];

var allComps = '';
for (var i in response) {
  allComps += response[i].id;
  allComps += ", ";
}
document.getElementById("response").innerHTML = allComps;

<div id="response">
</div>

Referencing Properties While Iterating Through JSON Array

3 Answers3

Examples