在 JavaScript 中循环遍历 JSON 嵌套数组

Question

我有一个 API，它给了我一个这样的 JSON 文件： （我编辑了我的帖子。我希望它可以帮助）

{
"events": {

    "Israel Liga Bet South": [
        {
            "id": 47,
            "league_name": "Israel Liga Bet South",
            "home_team": "Otzma FC Holon",
            "away_team": "Beitar Ramat Gan"
        }
    ],
    "Israel Liga Bet North": [
        {
            "id": 46,
            "league_name": "Israel Liga Bet North",
            "home_team": "Bnei HaGolan VeHaGalil",
            "away_team": "Maccabi Maalot Tarshiha"
        }
    ],
    "India Bangalore Super Division": [
        {
            "id": 40,
            "league_name": "India Bangalore Super Division",
            "home_team": "ASC",
            "away_team": "South United"
        }
    ]
}
}

我写了这段代码：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        var events;
events = myObj.events;
Object.keys(events).forEach(function (key) {
   var inPlayEvents = events[key];
   inPlayEvents.forEach(element => {
    var div = document.createElement('div');
    div.innerHTML = "my html codes";
    div.setAttribute('class', 'event-type');
    document.body.appendChild(div);
       });

});

    }


};
xmlhttp.open("GET", "json.txt", true);
xmlhttp.send();

但它显示了所有的比赛 我想在相同的<div> 中显示相同的联赛比赛 我该怎么做？ 感谢您的帮助

Answer 1

首先，您的 JSON 格式错误，甚至无法解析。假设 JSON 对象是这样的：

 "Categories": {
    "cat1": [
        {
            "id": 1,
            "Category_name": "cat1",
            "Name": "iphone6",
            "Details": "packed",
    }
],
"cat2": [
    {
        "id": 2,
        "Category_name": "cat2",
        "Name": "GalaxyS10",
        "Details": "stock"
    }
],
"cat1": [
    {
        "id": 3,
        "Category_name": "cat1",
        "Name": "iphone5s",
        "Details": "stock"         
    }
]

}

至于但 它向我显示了我想在同一个 div 中显示相同类别产品的所有产品您需要在迭代器代码中更改以下内容：

if (this.readyState == 4 && this.status == 200) {
  var myObj = JSON.parse(this.responseText);
  var Categories;
  Categories = myObj.Categories;
  Object.keys(Categories).forEach(function(key) {
        var Products = Categories[key];
        // create your div here
        var div = document.createElement('div');
        div.innerHTML = '';
        Products.forEach(element => {
              //[! remove this] var div = document.createElement('div');
              //[! concatenate instead of assigning it] div.innerHTML = "html codes here";
              div.innerHTML += 'your html here';
              div.setAttribute('class', 'category-type');

为什么？因为在您的代码中，您将 HTML 重新分配给每个产品的新 div。由于您希望在单个 div 中显示每个类别下所有产品的所有信息，因此您的代码将无法按预期工作。