如何在ul和li中使用jquery渲染嵌套的JSON

Question

我面臨兩個問題1.我沒有正確的HTML結構，請參見下圖

目前，我正在獲取html結構：

我在尋找html結構：

2. 如何為動態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/

Answer 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 ，因為它包含一個Array，並且您可以使用例如childs保存值對象？