Question

我试图使用Javascript来迭代HTTP请求提供的JSON数组，但我似乎无法弄清楚为什么这不能给我提供我所知道的属性。我正在寻找。 i.id正在返回＆＃34; undefined＆＃34 ;;为什么它不会返回每个id属性在它迭代的对象中的什么？

使用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"
}
]

Answer 1

在这种情况下，

i实际上是索引，您必须使用response[i]。

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

Answer 2

使用for...in遍历对象的键。在您的情况下，0,1,2等等。

要解决此问题，您可以使用for...of或使用response[i]

实施例

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

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

Answer 3

您必须在代码中进行以下更改：

而不是使用response[i].id使用i作为for (var i in response) { allComps += response[i].id; allComps += ", "; }是索引，它将始终与数组一起使用。

修改后的代码：

JSON.parse

在使用JSON string之前，请确保您的回复数据应为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;。

工作演示：

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

通过JSON数组迭代时引用属性

3 个答案:

实施例