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中显示每个类别下所有产品的所有信息，因此您的代码将无法正常工作。

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

1 个答案: