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

Question

I have a problem with getting some data from JSON format. I already got most of the data, but there is data which is an array inside of an array and it's more complicated. I can't seem to find out what should I do.

The JSON file is like that:(that's a part of it - i can't change it)

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

My code, a part which doesn't work as I want:

    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]; 
});

I need to get data as Array. But I can't wrote that part like: this[i].description. The other data worked well like this:

rain[i]=json.smth[i].part.d;

There I didn't need to use

$.each(json.list, function()

Also, I don't know if it's somehow possible for the last 10 rows in my code to use a loop..

Does anyone have any suggestions? I'd be really grateful..

Answer 1

So if I'm understand what you are trying to do correctly, then you should be able to do this:

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

And you'll end up with your two arrays populated.

Personally, if those two items, icon and description, are associated together, I'd rather keep them together in a single object. Something like:

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

Which you can now access each component:

foo[0].icon
foo[0].desc

Now to do your DOM manipulation, you can just loop through your new array (or arrays if you keep them separate):

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

Or as @malkam suggested, if you don't actually need the arrays, you can just do the DOM manipulation right inside your JSON processing loop.

Answer 2

Try this

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