不能在javascript/jquery中使用for循环从数组中获取JSON数据

Can't get JSON data from array inside of array using for loop in javascript/jquery

本文关键字：循环 数组 获取 数据 JSON for javascript jquery 不能      更新时间：2023-09-26

我有一个问题，从JSON格式获得一些数据。我已经得到了大部分数据，但有些数据是数组中的数组，这更复杂。我似乎不知道该做什么。

JSON文件是这样的:(这是它的一部分-我不能改变它)

{
    "smth": [
        {
            "part": {
                "d": 295.15
            },
            "rock": [
                {
                    "description": "heavy",
                    "icon": "22sd"
                }
            ],
            "song": 10
        }
        {
            "part": {
                "d": 295.15
            },
            "rock": [
                {
                    "description": "soft",
                    "icon": "33sd"
                }
            ],
            "song": 10
        }
    ]
}

我的代码，其中一部分没有按我想要的工作:

    var icon=[];
    var desc=[];
$.getJSON(url, function(json) {
    $.each(json.smth, function() {
    $.each(this.rock, function() {
    for (var i in json.smth){
              main[i] = this.description;
              icon[i] = this.icon; 
             }
        });
    });    
      document.getElementById('icon1').src='..//img/w/'+icon[0]+'.png';
      document.getElementById('icon2').src='..//img/w/'+icon[1]+'.png';
      document.getElementById('icon3').src='..//img/w/'+icon[2]+'.png';
      document.getElementById('icon4').src='..//img/w/'+icon[3]+'.png';
      document.getElementById('icon5').src='..//img/w/'+icon[4]+'.png';
      document.getElementById('main1').innerHTML=desc[0];
      document.getElementById('main2').innerHTML=desc[1];
      document.getElementById('main3').innerHTML=desc[2];
      document.getElementById('main4').innerHTML=desc[3];
      document.getElementById('main5').innerHTML=desc[4]; 
});

我需要得到数据作为数组。但是我不能把这部分写成:this[i].description。其他数据运行良好，如下所示:

rain[i]=json.smth[i].part.d;
这里我不需要使用 
$.each(json.list, function()

此外，我不知道是否有可能在我的代码的最后10行使用循环..

有人有什么建议吗?

如果我理解你想做的是正确的，那么你应该能够这样做:

$.each(json.smth, function() {
    $.each(this.rock, function() {
        icon.push(this.icon);
        desc.push(this.description);
    }
}

你将结束你的两个数组填充。

就我个人而言，如果这两个项目，图标和描述，是关联在一起的，我宁愿把它们放在一个对象中。比如:

var foo = [];
$.each(json.smth, function() {
    $.each(this.rock, function() {
        foo.push({icon:this.icon,desc:this.description});
    }
}

您现在可以访问每个组件:

foo[0].icon
foo[0].desc
现在要进行DOM操作，你可以循环遍历你的新数组(或数组，如果你保持它们分开): 
for (var i=0; i < foo.length; i++) {
    $("#icon" + (i+1)).prop("src","..//img/w/"+foo[i].icon+".png");
    $("#main" + (i+1)).html(foo[i].desc);
}

或者像@malkam建议的那样，如果您实际上不需要数组，您可以在JSON处理循环中直接进行DOM操作。

试试这个

$.getJSON(url, function (json) {
             $.each(json.smth, function () {
                $.each(this.rock, function (idx) {
                    document.getElementById('icon' + (idx + 1).toString()).src = '..//img/w/' + this.icon + '.png';
                    document.getElementById('main' + (idx + 1).toString()).innerHTML = this.description;
                }
        );
            });
        });
相关文章：