如何在 ul 和 li 中使用 jquery 呈现嵌套 JSON答案

【问题标题】：How to render nested JSON using jquery in ul and li如何在 ul 和 li 中使用 jquery 呈现嵌套 JSON
【发布时间】：2017-08-21 18:40:19
【问题描述】：

我面临两个问题 1.我没有得到正确的HTML结构见下图

目前我得到的 html 结构：

我要找的html结构：

如何为动态 JSON 编写代码，例如，我的 JSON 可能有 4 级子菜单，但我无法编写那么多循环和条件，因此尝试通过编写嵌套循环从 json 渲染李>

这是我尝试过的代码：

$(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/

【问题讨论】：

标签： javascript jquery html css json

【解决方案1】：

这就是你要找的吗？

$(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

但是有一个问题：为什么你需要在child 内嵌套values，因为它包含一个数组，你可以使用例如childs 来保存值对象？

【讨论】：