Problem looping through nested JavaScript objects and arrays

Question

i need display the child value, but it display [object, object] like that so

Here my code:

var jsonObj = {"department":{
              "Title1":[
                           {"child1":"Green",
                            "child2":"Yellow"
                           },

                           {"child3":"Black",
                            "child4":"White"
                           }
                           ],
              "Title2":[
                           {"child5":"Violet",
                            "child6":"purple"
                           },
                          {"child7":"Pink",
                            "child8":"Orange"
                           }
                           ]
  }
}
$(document).ready(function() {

var  treeList = "";
treeList = "<ul id=\"createTree\">";     
for(var key in jsonObj){
        for(var subKey in jsonObj[key]){
        alert(subKey);
        //for(i=0; i<jsonObj[key].length;i++ ) {
           treeList +=  ("<li>" + subKey + "<ul><li>"+jsonObj[key][subKey]+"</li></ul></li>");
           //var b = $(c).text();
           alert(treeList);
       }
    }
treeList += "</ul>";
$('#tree').append(treeList);
});

Consider writing a slightly more descriptive title to your question, short and concise, without necessarily including your entire question in said title... — J. Steen
– J. Steen, Commented Jul 22, 2011 at 10:22
There is no JSON in your code. I'd say you have a problem with JavaScript objects. — Felix Kling
– Felix Kling, Commented Jul 22, 2011 at 10:25

ipr101 · Accepted Answer · 2011-07-22 12:30:35Z

1

As Quentin said you need to keep drilling down, first into the array then into the objects contained within the array. The code below should access all the variables held in the JSON, you might have to restructure the HTML it outputs to get it looking as you want -

$(document).ready(function() {

var  treeList = "";
treeList = "<ul id=\"createTree\">";     
for(var key in jsonObj){
        for(var subKey in jsonObj[key]){
        alert(subKey);
        for(i=0; i<jsonObj[key][subKey].length;i++ ) {
           for(var arrayKey in jsonObj[key][subKey][i]){ 
              treeList +=  ("<li>" + subKey + " - " + arrayKey  + " - "+jsonObj[key][subKey][i][arrayKey]+"</li></ul></li>");
           }    
           //var b = $(c).text();
           alert(treeList);
        }   
       }
    }
    treeList += "</ul>";
    $('#tree').append(treeList);
});

edited Jul 22, 2011 at 12:30

answered Jul 22, 2011 at 10:40

ipr101

24.2k8 gold badges61 silver badges62 bronze badges

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

Comments

Quentin · Accepted Answer · 2011-07-22 10:24:16Z

1

The first jsonObj[key][subKey] will be jsonObj.department.Title1. This is an array.

When you stringify an array, it will, by default, produce the generic "This is an object" text.

If you want to display the data in it, you will have to keep going down to get at the strings.

answered Jul 22, 2011 at 10:24

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Collectives™ on Stack Overflow

Problem looping through nested JavaScript objects and arrays

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related