archytect
archytect

Reputation: 3725

looping through json object with jquery

Havn't done much with json in a while.

I have the following json object

[{"Id":1,"Category":"Category1","Comments":[
    {"Id":1,"Comment":"test"},
    {"Id":2,"Comment":"test 2"}
]},
 {"Id":2,"Category":"Category2","Comments":[
    {"Id":1,"Comment":"test"}
]},
 {"Id":3,"Category":"Category3","Comments":[
    {"Id":1,"Comment":"something"},
    {"Id":2,"Comment":"test 2"},
    {"Id":3,"Comment":"test 3"},
    {"Id":4,"Comment":"something 4"},
    {"Id":5,"Comment":"something 5"}
]}]

what's the best way to loop through this with jQuery/JS to print out each Category and all of its comments?

Upvotes: 0

Views: 110

Answers (4)

Matyas
Matyas

Reputation: 13702

Pure js solution with DEMO that should work with any non-recursive object / JSON object of any depth:

var jsonObj = [{"Id":1,"Category":"Category1","Comments":[{"Id":1,"Comment":"test"},{"Id":2,"Comment":"test 2"}]},{"Id":2,"Category":"Category2","Comments":[{"Id":1,"Comment":"test"}]},{"Id":3,"Category":"Category3","Comments":[{"Id":1,"Comment":"something"},            {"Id":2,"Comment":"test 2"},            {"Id":3,"Comment":"test 3"},            {"Id":4,"Comment":"something 4"},            {"Id":5,"Comment":"something 5"}        ]}];

var obj2String = function (obj, indent) {   // recursive method to print out all key-value pairs within an object
    indent = indent ? indent+'  ':' ';       // every level should be indented 2 spaces more
    if (typeof obj !== 'object') {          // if it's a simple value (not obj or array)
        return [indent, obj, '\n'].join('');// add it to the string (with a new line at the end)
    } else { // otherwise 
        var ret = '';
        for (var key in obj) {              // loop through the object
            if (obj.hasOwnProperty(key)) {  // check if the key refers to one of its values (and not the prototype)
                // if yes add the "key: " + the result objs2String(value) with correct indentation
                ret += [indent, key+':\n', obj2String(obj[key], indent)].join(''); 
            }
        }
        return (obj.indexOf ?               // return the results wrapped in a [] or {} depending on if it's an object or array (by checking the indexOf method. of course this delivers false results if the object has an indexOf method)
            [indent, '[\n', ret, indent, ']']:[indent, '{\n', ret, indent, '}']).join('');
    }
}

console.log(obj2String(jsonObj));           // print out the result

Upvotes: 2

dejavu
dejavu

Reputation: 3254

If you use pure Javascript then:

data is the json data

for (var i in data)
{
    console.log("category:"+data[i].Category);
    for(var j in data[i].Comments)
    {
        console.log(data[i].Comments[j].Comment);
    }
}

Upvotes: 1

Andrea Scarcella
Andrea Scarcella

Reputation: 3333

This function will print out every member of the object, it can be customised to print only those of interest. EDIT: updated fiddle updated fiddle

var v= [{"Id":1,"Category":"Category1","Comments":[
        {"Id":1,"Comment":"test"},
        {"Id":2,"Comment":"test 2"}
    ]},
     {"Id":2,"Category":"Category2","Comments":[
        {"Id":1,"Comment":"test"}
    ]},
     {"Id":3,"Category":"Category3","Comments":[
        {"Id":1,"Comment":"something"},
        {"Id":2,"Comment":"test 2"},
        {"Id":3,"Comment":"test 3"},
        {"Id":4,"Comment":"something 4"},
        {"Id":5,"Comment":"something 5"}
    ]}];
var rf=function recf(index,value){
console.log(value);
    if (value instanceof Object){
        $.each(value,function(val,idx){recf(val,idx)});
    }
};


$.each(v,rf);

Here's my fiddle

Upvotes: 1

Henrik Andersson
Henrik Andersson

Reputation: 47222

Use $.each(json, function(index, jsonObject).

You would have to do some nesting of course, something along the lines of

$.each(json, function(index, jsonObject){
    console.log(jsonObject.Category);
    $.each(jsonObject.Comments, function(i, comment){
        console.log(comment);
    });
});

Upvotes: 2

Related Questions