在 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 中顯示每個類別下所有產品的所有信息，因此您的代碼將無法按預期工作。