javascript - 使用嵌套 JSON 响应创建 HTML 列表(具有未定义的 Json 索引级别)？

Question

我是 jquery/Javascript 新手，在将 json 响应转换为 HTML 列表时卡住了，在 Json 响应中，对象内部存在高达未定义级别的对象，如果您有任何想法，请帮助我，

JSON 响应

[
{
Id: 0,
expanded: false,
Name: "Libraries",
ParentID: -1,
children: [
{
Id: 1,
expanded: false,
Name: "Image",
ParentID: 0,
children: [
{
Id: 4,
expanded: false,
Name: "JPEG",
ParentID: 1,
children: [ ]
}
]
},
{
Id: 2,
expanded: false,
Name: "Video",
ParentID: 0,
children: [
{
Id: 8,
expanded: false,
Name: "MP4",
ParentID: 2,
children: [
{
Id: 13,
expanded: false,
Name: "Sample.mp4",
ParentID: 8,
children: [
{
Id: 15,
expanded: false,
Name: "New Hit Video",
ParentID: 13,
children: [ ]
}
]
}
]
}
]
}
]
}
]

所需的 Html 输出

<ul>Libraries
<li>Image
<ul>
<li>JPEG</li>
</ul>
</li>

<li>Video
<ul>
<li>MP4
<ul>
<li>Sample.mp4
<ul>
<li>New Hit Video
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

我的尝试代码:

$(document).ready(function(){
var json='
[{"Id":0,"expanded":false,"Name":"Libraries","ParentID":-1,"children":[{"Id":1,"expanded":false,"Name":"Image","ParentID":0,"children":[{"Id":4,"expanded":false,"Name":"JPEG","ParentID":1,"children":[]}]},{"Id":2,"expanded":false,"Name":"Video","ParentID":0,"children":[{"Id":8,"expanded":false,"Name":"MP4","ParentID":2,"children":[{"Id":13,"expanded":false,"Name":"Sample.mp4","ParentID":8,"children":[{"Id":15,"expanded":false,"Name":"New Hit Video","ParentID":13,"children":[]}]}]}]}]}]';
var obj=$.parseJSON(json);
// var a=0;
$.each(obj, traversal);
function traversal(key, value) {
  if(value.Name!=null && value.ParentID!=-1 )
  {
   $('body').append('<ul name='+value.Name+' id='+value.Id+' parentID='+value.ParentID+'><a href="#" id='+value.Id+'>'+value.Name+'</a></ul>')
  }
    if (value !== null && typeof value === "object") {
        $.each(value, traversal);
    }
}
})

Answer 1

经过一番搜索，我找到了答案......有效

 <script type="text/javascript">
    function parseNodes(nodes) { // takes a nodes array and turns it into a <ol>
        var ol = document.createElement("OL");
        for(var i=0; i<nodes.length; i++) {
            ol.appendChild(parseNode(nodes[i]));
        }
        return ol;
    }

    function parseNode(node) { // takes a node object and turns it into a <li>
        var li = document.createElement("LI");
        li.innerHTML = '<a href="#">'+node.Name+'';
        li.className = node.Id;
        if(node.children) li.appendChild(parseNodes(node.children));
        return li;
    }

    window.jsonData =[
    {
        "Id": 0,
        "expanded": false,
        "Name": "Libraries",
        "ParentID": -1,
        "children": [
            {
                "Id": 1,
                "expanded": false,
                "Name": "Image",
                "ParentID": 0,
                "children": [
                    {
                        "Id": 4,
                        "expanded": false,
                        "Name": "JPEG",
                        "ParentID": 1,
                        "children": []
                    }
                ]
            },
            {
                "Id": 2,
                "expanded": false,
                "Name": "Video",
                "ParentID": 0,
                "children": [
                    {
                        "Id": 8,
                        "expanded": false,
                        "Name": "MP4",
                        "ParentID": 2,
                        "children": [
                            {
                                "Id": 13,
                                "expanded": false,
                                "Name": "Sample.mp4",
                                "ParentID": 8,
                                "children": [
                                    {
                                        "Id": 15,
                                        "expanded": false,
                                        "Name": "New Hit Video",
                                        "ParentID": 13,
                                        "children": []
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
];

    </script>