How to render nested JSON using jquery in ul and li

Question

I am Facing two issues 1.I am not getting a proper HTML structure see the below picture

Currently what I am getting the html structure:

What I am looking for the html structure:

2. How to make my code for dynamic JSON, for eg, my JSON may have 4 level of sub menus but i will not be able to write that much loops and condition, so trying to render from json with writing nested loops

Here is my code what I tried:

$(document).ready(function(){

 var treeJson = {"values":[
        {
            "tree_title":"FashionWorld1",
            "tree_image":"img_arrow",
            "tree_image_position":"1",
            "tree_image":"FashionWorld",
            "isopen":"0",
            "child":[
                {
                    "values":[
                            {
                                "tree_title":"SubmenuLevel11",
                                "tree_image":"img_arrow",
                                "tree_image_position":"1",
                                "tree_image":"FashionWorld",
                                "isopen":"0",
                            "child":[
                                {
                                    "values":[
                                        {"tree_title":"SubmenuLevel21"},
                                        {"tree_title":"SubmenuLevel22"},
                                        {"tree_title":"SubmenuLevel23"}
                                    ]
                                }
                            ]
                        },
                        {"tree_title":"SubmenuLevel12"},
                        {"tree_title":"SubmenuLevel13"}
                    ]
                }
            ]
        },
               {
            "tree_title":"FashionWorld2",
            "tree_image":"img_arrow",
            "tree_image_position":"1",
            "tree_image":"FashionWorld",
            "isopen":"0",
            "child":[
                {
                    "values":[
                    {
                                "tree_title":"SubmenuLevel11",
                                "tree_image":"img_arrow",
                                "tree_image_position":"1",
                                "tree_image":"FashionWorld",
                                "isopen":"0",
                            "child":[
                                {
                                    "values":[
                                        {"tree_title":"SubmenuLevel21"},
                                        {"tree_title":"SubmenuLevel22"},
                                        {"tree_title":"SubmenuLevel23"}
                                    ]
                                }
                            ]
                        },
                        {"tree_title":"SubmenuLevel12"},
                        {"tree_title":"SubmenuLevel13"}
                    ]
                }
            ]
        },
                {
            "tree_title":"FashionWorld3",
            "tree_image":"img_arrow",
            "tree_image_position":"1",
            "tree_image":"FashionWorld",
            "isopen":"0",
            "child":[
                {
                    "values":[
                    {
                                "tree_title":"SubmenuLevel11",
                                "tree_image":"img_arrow",
                                "tree_image_position":"1",
                                "tree_image":"FashionWorld",
                                "isopen":"0",
                            "child":[
                                {
                                    "values":[
                                        {"tree_title":"SubmenuLevel21"},
                                        {"tree_title":"SubmenuLevel22"},
                                        {"tree_title":"SubmenuLevel23"}
                                    ]
                                }
                            ]
                        },
                        {"tree_title":"SubmenuLevel12"},
                        {"tree_title":"SubmenuLevel13"}
                    ]
                }
            ]
        },
                 {
            "tree_title":"FashionWorld4",
            "tree_image":"img_arrow",
            "tree_image_position":"1",
            "tree_image":"FashionWorld",
            "isopen":"0",
            "child":[
                {
                    "values":[
                    {
                                "tree_title":"SubmenuLevel11",
                                "tree_image":"img_arrow",
                                "tree_image_position":"1",
                                "tree_image":"FashionWorld",
                                "isopen":"0",
                            "child":[
                                {
                                    "values":[
                                        {"tree_title":"SubmenuLevel21"},
                                        {"tree_title":"SubmenuLevel22"},
                                        {"tree_title":"SubmenuLevel23"}
                                    ]
                                }
                            ]
                        },
                        {"tree_title":"SubmenuLevel12"},
                        {"tree_title":"SubmenuLevel13"}
                    ]
                }
            ]
        }
    ]};
var treeParentArr = treeJson.values;
if(treeParentArr.length){
    var $ulLevel1 = $("<ul />").appendTo($("#tree"));
    //level 1
    for (var i = 0; i < treeParentArr.length; i++) {
            var treeParentVal = treeParentArr[i];
            var listChildLevel1 = $ulLevel1.append($("<li />", { text: treeParentVal.tree_title }));
            var childSubVal1 = treeParentVal.child;
            if(childSubVal1){
                var treechildLevel1 = childSubVal1[0].values;

                //level 2
                //check  the condition data is there or not
                if(treechildLevel1.length){         
console.log(i);             
                    var $ulLevel2 = $("<ul />").appendTo($(listChildLevel1));
                    for (var j = 0; j < treechildLevel1.length; j++) {
                        var treeChildLevelData1 =  treechildLevel1[j];
                        var listChildLevel2 = $ulLevel2.append($("<li />", { text: treeChildLevelData1.tree_title }));

                            //level 3
                            //check  the condition data is there or not
                            var childSubVal2 = treeChildLevelData1.child;
                            if(childSubVal2){
                            var treechildLevel2 = childSubVal2[0].values;
                            if(treechildLevel2.length){
                                //console.log(treechildLevel2);
                                var $ulLevel3 = $("<ul />").appendTo($(listChildLevel2));
                                for (var k = 0; k < treechildLevel2.length; k++) {
                                     var treeChildLevelData2 =  treechildLevel2[k];
                                     $ulLevel3.append($("<li />", { text: treeChildLevelData2.tree_title }));
                                }
                            }
                        }

                    }
                }

            }
    }

}
});

JSFiddle

https://jsfiddle.net/pxhupap1/

Answer 1

is this what you are looking for?

$(document).ready(function() {

    var treeJson = {
        "values": [{
                "tree_title": "FashionWorld1",
                "tree_image": "img_arrow",
                "tree_image_position": "1",
                "tree_image": "FashionWorld",
                "isopen": "0",
                "child": [{
                    "values": [{
                            "tree_title": "SubmenuLevel11",
                            "tree_image": "img_arrow",
                            "tree_image_position": "1",
                            "tree_image": "FashionWorld",
                            "isopen": "0",
                            "child": [{
                                "values": [{
                                        "tree_title": "SubmenuLevel21"
                                    },
                                    {
                                        "tree_title": "SubmenuLevel22"
                                    },
                                    {
                                        "tree_title": "SubmenuLevel23"
                                    }
                                ]
                            }]
                        },
                        {
                            "tree_title": "SubmenuLevel12"
                        },
                        {
                            "tree_title": "SubmenuLevel13"
                        }
                    ]
                }]
            },
            {
                "tree_title": "FashionWorld2",
                "tree_image": "img_arrow",
                "tree_image_position": "1",
                "tree_image": "FashionWorld",
                "isopen": "0",
                "child": [{
                    "values": [{
                            "tree_title": "SubmenuLevel11",
                            "tree_image": "img_arrow",
                            "tree_image_position": "1",
                            "tree_image": "FashionWorld",
                            "isopen": "0",
                            "child": [{
                                "values": [{
                                        "tree_title": "SubmenuLevel21"
                                    },
                                    {
                                        "tree_title": "SubmenuLevel22"
                                    },
                                    {
                                        "tree_title": "SubmenuLevel23"
                                    }
                                ]
                            }]
                        },
                        {
                            "tree_title": "SubmenuLevel12"
                        },
                        {
                            "tree_title": "SubmenuLevel13"
                        }
                    ]
                }]
            },
            {
                "tree_title": "FashionWorld3",
                "tree_image": "img_arrow",
                "tree_image_position": "1",
                "tree_image": "FashionWorld",
                "isopen": "0",
                "child": [{
                    "values": [{
                            "tree_title": "SubmenuLevel11",
                            "tree_image": "img_arrow",
                            "tree_image_position": "1",
                            "tree_image": "FashionWorld",
                            "isopen": "0",
                            "child": [{
                                "values": [{
                                        "tree_title": "SubmenuLevel21"
                                    },
                                    {
                                        "tree_title": "SubmenuLevel22"
                                    },
                                    {
                                        "tree_title": "SubmenuLevel23"
                                    }
                                ]
                            }]
                        },
                        {
                            "tree_title": "SubmenuLevel12"
                        },
                        {
                            "tree_title": "SubmenuLevel13"
                        }
                    ]
                }]
            },
            {
                "tree_title": "FashionWorld4",
                "tree_image": "img_arrow",
                "tree_image_position": "1",
                "tree_image": "FashionWorld",
                "isopen": "0",
                "child": [{
                    "values": [{
                            "tree_title": "SubmenuLevel11",
                            "tree_image": "img_arrow",
                            "tree_image_position": "1",
                            "tree_image": "FashionWorld",
                            "isopen": "0",
                            "child": [{
                                "values": [{
                                        "tree_title": "SubmenuLevel21"
                                    },
                                    {
                                        "tree_title": "SubmenuLevel22"
                                    },
                                    {
                                        "tree_title": "SubmenuLevel23"
                                    }
                                ]
                            }]
                        },
                        {
                            "tree_title": "SubmenuLevel12"
                        },
                        {
                            "tree_title": "SubmenuLevel13"
                        }
                    ]
                }]
            }
        ]
    };
    var treeParentArr = treeJson.values;
    var tree = buildNodes(treeJson, $("#tree"));
});

function buildNodes(node, parent) {
    $(node.values).each(function() {
        var element = this;
        var listItem = $("<li />", {
            text: this.tree_title
        })
        if (this.hasOwnProperty("child")) {
            var tree = $("<ul />");
            buildNodes(this.child[0], tree);
            listItem.append(tree)
        }
        parent.append(listItem);
    });
}

JSFiddle

But one question: why do you need the nested values inside of child as this contains an Array and you could use e.g childs holding the values objects?