JSON recursive parsing with jquery

Question

anyway can help me to parse the multilevel json format my sample data is:

[{
"name":"mainparentid:20 ","id":"161","icon":"null","parentId":"0","spaceId":"1","status":"null",

    "children":
        [
            {"name":"Home","id":"166","parentId":"161","spaceId":"1","status":"NEW",
                "children":[{
                    "name":"TV","id":"167","parentId":"166","spaceId":"1","status":"NEW",
                        "children":[{
                            "name":"testtt","id":"177","parentId":"167","spaceId":"1","status":"NEW"
                        }]
                }]
            },{"name":"Office 1","id":"164","parentId":"161","spaceId":"1","status":"NEW" }
        ]}]

so far i have this code:

$(data).each(function(index){
var flevel = eval(this.children)
$(flevel).each(function(i){
    //print the first level records

    itms += '<ul>'+
    itms += '<li>'+this.name+'<ul>';

    if(typeof this.children !== 'undefined'){
        var slevel = eval(this.children);
        $(slevel).each(function(i){

            itms += '<li>'+this.name+'</li>'

        });

        //and so on and so fort to print 
    }

});
itms += '</ul></li></ul>'; });

this code is working upto second level of parsing my problem is if the data is more than two levels. Can i ask what is the best way to do this. Thank you.

I also tried the answer in this thread JSON Recursive looping issue with Jquery

but i can't make it to work. My goal is to render this as a treeview

FIXES: thank you to Mouser

$(data).each(function(index){
var flevel = this.children
$(flevel).each(function(i){
    //print the first level records
    if(typeof this.children !== 'undefined'){
        var slevel = this.children;
        $(slevel).each(function(i){
            recursive(slevel);
        });
    }
});});

function recursive(data){
    $(data).each(function(i){
        if(has a children){
            recursive(this.children);
        }
    });}

Switch from one loop for every level to one loop to iterate the properties of the current object within a function. If the property contains other enumerable properties invoke the function again. This way you create a recursive function, — Mouser
– Mouser, Commented Mar 18, 2015 at 9:51

Zeljko · Accepted Answer · 2015-03-18 10:17:42Z

3

You can use following recursive function to parse your data structure in UL and LI elements:

function ParseChildren(data)
{
    var result = '<ul>';

    for (var i=0; i< data.length; i++)
    {
        result += '<li>' + data[i].name + '</li>';

        if (data[i].children && data[i].children.length > 0)
            result += ParseChildren(data[i].children);

    }

    return result + '</ul>';
}

answered Mar 18, 2015 at 10:17

Zeljko

412 bronze badges

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

Comments

Vipul Kumar · Accepted Answer · 2015-03-18 10:42:07Z

Try this code snippet for the tree view structure you want

    $(data).each(function (index) {
        var flevel = eval(this.children)
        $(flevel).each(function (i) {
            //print the first level records

            itms += '<ul>';
            itms += '<li>' + this.name + '<ul>';

            var child = this.children;
            var itmend = '</ul></li>';
            while (child != undefined) {
                debugger
                itms = iterateChildren(child, itms)
                child = child[0].children;
                itmend += '</ul></li>';
            }
            itms += itmend;                
        });
        itms += '</ul></li></ul>';
    });
    function iterateChildren(child, itms) {
        if (child[0].children == undefined) {
            itms += '<li>' + child[0].name + '</li>'
        }
        else {
            itms += '<li>' + child[0].name + '<ul>'
        }

        return itms;
    }

Collectives™ on Stack Overflow

JSON recursive parsing with jquery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related