current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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..

share|improve this question
    
What's json.list? Do you just want to push each item from the rock array into another array? –  Matt Burland Jun 6 at 19:00
    
I edited the json.list.. I forgot to add that the json list from "part" to "song" repeats with different values 5 times. That's why I need to use array. I need to get 5 values of rock.desc and rock.item to use them in html. ..and json.list was a mistake.. there should be json.smth. –  PureSoul Jun 6 at 19:08
1  
You still haven't answered his question. What is json.list? Or rather, what are you trying to do with this.description and this.icon? –  Jim H. Jun 6 at 19:12
    
json.list should be json.smth. I edited that mistake. This mistake happened as I copied my code here. –  PureSoul Jun 6 at 19:17
    
before I used main[i]=json.smth.rock[i].description; but the result was that I didn't get the value.. the word undefined appeared there... that's why I use now $.each(json.smth, function() and values appear but if I use this I can't add [i] there.. so result is that values appear in html but there is everywhere only the last value of json array.. –  PureSoul Jun 6 at 19:22

2 Answers 2

up vote 0 down vote accepted

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.

share|improve this answer
    
Thanks a lot!!! My code works perfectly now thanks to you! :) –  PureSoul Jun 6 at 21:26
up vote 0 down vote

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;
                }
        );
            });
        });
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.