无法在javascript / jquery中使用for循环从数组内部的数组中获取JSON数据

时间:2014-06-06 18:52:58

标签: javascript jquery arrays json getjson

我从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行是否有可能使用循环..

有没有人有任何建议?我真的很感激......

2 个答案:

答案 0 :(得分:0)

试试这个

$.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;
                }
        );
            });
        });

答案 1 :(得分:0)

因此,如果我理解你正在尝试做什么,那么你应该能够做到这一点:

$.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操作。