problem looping through jquery .each with a multi array json file

Question

I've seached high and low, and have had no luck finding the answer to this one.

I've got a json file that i'm using .each on. Have a look at the .json format - it's got a couple sub arrays:

http://heykoolaid.com/sections2.json

Here is the .html

http://heykoolaid.com/json_output.html

As you can see, it's just writing "[object Object]," as it runs through the arrays.

What am I doing wrong?

And how can i access the sub arrays ?

By now, I've pretty much got my head around this shizz, but i'm still lost when it comes to accessing the sub array data

Here is the code: (json)

{ "zones":[ {   "id":"arcade",  "zoneColor":"#ed08ef",  "sections":[        {           "sectionId":"arcade-145",           "name":"Arcade 145",            "coords":[[-32.36140331527542,43.2861328125],[-31.98944183792288,46.34033203125],[-29.80251790576445,46.5380859375],[-30.259067203213018,42.86865234375]],          "markers":[]        },      {           "sectionId":"arcade-146",           "name":"Arcade 146",            "coords":[[-30.977609093348676,37.08984375],[-33.06392419812064,37.177734375],[-32.41706632846281,42.6708984375],[-30.334953881988564,42.29736328125]],             "markers":[]        },      {           "sectionId":"arcade-147",               "name":"Arcade 147",            "coords":[[-31.034108344903498,36.40869140625],[-33.174341551002065,36.58447265625],[-33.5230788089042,33.8818359375],[-33.9433599465788,33.59619140625],[-33.26624989076273,33.15673828125],[-31.203404950917385,34.7607421875]],          "markers":[]        }   ] }, {  "id":"view-infield",    "zoneColor":"#0a1966",  "sections":[        {           "sectionId":"view-infield-305",                 "name":"View Infield 305",          "coords":[[-40.83043687764923,-40.0341796875],[-44.245199015221274,-36.18896484375],[-40.39676430557204,-29.6630859375],[-36.66841891894784,-33.37646484375]],          "markers":[]        },      {           "sectionId":"view-infield-307",                 "name":"View Infield 307",          "coords":[[-36.52729481454623,-44.560546875],[-40.17887331434696,-40.71533203125],[-36.42128244364948,-34.69482421875],[-32.56533316084102,-38.51806640625]],           "markers":[]        },      {           "sectionId":"view-infield-308",             "name":"View Infield 308",          "coords":[[-31.933516761903675,-49.02099609375],[-27.839076094777802,-43.06640625],[-32.082574559545904,-38.9794921875],[-35.97800618085566,-45.0439453125]],           "markers":[]        }   ] }, {  "id":"view-outfield",   "zoneColor":"#165604",  "sections":[        {           "sectionId":"view-outfield-333",                "name":"View Outfield 333",             "coords":[[60.45721779774397,36.6943359375],[56.58369172128337,47.373046875],[52.5897007687178,42.890625],[55.5161921571789,35.2001953125]],            "markers":[]        },      {           "sectionId":"view-outfield-334",                "name":"View Outfield 334",         "coords":[[56.353077613860826,48.0322265625],[52.656393941988,57.216796875],[52.03897658307622,57.7880859375],[49.48240137826932,50.4052734375],[52.32191088594773,43.52783203125]],            "markers":[]        },      {           "sectionId":"view-outfield-335",                "name":"View Outfield 335",             "coords":[[51.60437164681676,58.16162109375],[47.010225655683485,61.962890625],[44.276671273775186,54.7119140625],[49.081062364320736,50.82275390625]],             "markers":[]        },   {      "sectionId":"view-outfield-336",            "name":"View Outfield 336",         "coords":[[46.52863469527167,62.33642578125],[43.8186748554532,64.423828125],[40.94671366508002,57.216796875],[43.75522505306928,55.107421875]],        "markers":[]        }   ] }     ]   }

and the html:

<script type="text/javascript"> 
$(function() {
    $.getJSON("sections2.json", tickets);

    function tickets(data) {
        var htmlString = "";

        $.each(data.zones, function(index, value) {
            htmlString += item.sections + "<br/>";
        });

        $('#test').html(htmlString);

    }
});

Please post the code that you are using.

a'r
– a'r

2011-02-08 05:36:10 +00:00
Commented Feb 8, 2011 at 5:36 — a'r
– a'r, Commented Feb 8, 2011 at 5:36

a'r · Accepted Answer · 2011-02-08 06:20:37Z

1

If you know exactly what you need from the data structure then you can just descend though the struture, eg.

data.zones[i].sections[j].name  // Access known location in data structure

If you need to iterate, then jQuery's each() function is quite handy:

$.each(data, function (i, zone) {
    //do stuff with zone data eg. print zone.id

    $.each(zone.sections, function (j, section) {
        //do stuff with section data, eg. print section.name
    });
});

Or iterating using just JavaScript:

for (i in data.zones) {
    zone = data.zones[i];
    // print zone.id
    for (j in zone.sections) {
        section = zone.sections[j];
        // print section data
    }
}

answered Feb 8, 2011 at 6:20

a'r

37.2k7 gold badges68 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vivek · Accepted Answer · 2011-02-08 05:46:46Z

0

you can use

$.each({arr},function(index, value){
       alert(index + ': ' + value); 

     }
    );

he $.each() function can be used to iterate over any collection, whether it is a map (JavaScript object) or an array

answered Feb 8, 2011 at 5:46

Vivek

11k15 gold badges51 silver badges68 bronze badges

1 Comment

jake Over a year ago

I tried that, but it just gave me "1:[object Object]" in an alert box. I've got no clue how to grab the items of the sub arrays

bcm · Accepted Answer · 2011-02-08 05:55:01Z

0

Please refer to the usage of the getJSON http://api.jquery.com/jQuery.getJSON/

I don't think you are passing the data to the success handler. If you follow the example from the link above, you should be in the right direction.

Success handler example:

$.getJSON('ajax/test.json', function(data) {
  $('.result').html('<p>' + data.foo + '</p>'
    + '<p>' + data.baz[1] + '</p>');
});

Your tickets(data) function is not getting the data after the getJSON completes.

answered Feb 8, 2011 at 5:55

bcm

5,50810 gold badges61 silver badges93 bronze badges

5 Comments

jake Over a year ago

it's working just fine. If i change it to use ` htmlString += item.zoneColor + "<br/>";` it works fine. I'm trying to access the data in the sub arrays

bcm Over a year ago

I don't think the issue is even with sub items. Your object is an empty object. Unless you've updated your html code example, your are not passing any json data to the success handler. Try debugging in IE dev tool.

bcm Over a year ago

Once you put the ';' after the json request, it is totally seperate from your function tickets(data), as compared to the example provided above, where the function is part of the json request, by a ','.

jake Over a year ago

i tied that, and it still spit out "[object Object]". Does anyone have a better example of how it's possible to loop through a multi array'd json file ?

bcm Over a year ago

hoping to help you understand JavaScript (and your problem) rather than spoonfeed... but I think @ar has done just that! ;)

Collectives™ on Stack Overflow

problem looping through jquery .each with a multi array json file

3 Answers 3

Comments

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related