迭代jQuery格式不正确的JSON

Question

我有一个包含许多嵌套对象的JSON文件，其结构类似于此：

    [
        {
            "name" : "Fruits",
            "subNav" :
            [
                {
                    "name" : "Apples",
                    "subNav" :
                    [
                        {
                            "name" : "Type 1"
                        },
                        {
                            "name" : "Type 2"
                        },
                        {
                            "name" : "Type 3"
                            "subNav" :
                            [
                                {
                                    "name" : "Type 3 A"
                                },
                                {
                                    "name" : "Type 3 B"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]

这种分支/嵌套结构相当广泛，并具有更多的“ key：value”对，出于可读性考虑，我将其省略。

我正在尝试创建可遍历嵌套对象并将其格式化为嵌套列表的迭代jQuery / js，如下所示：

$(document).ready(function() {
    var json;
    $.getJSON( "megaNav.json", function( data ) {
        var items = [];
        $.each(data , recurse);
        function recurse(key,val) {
            items.push( "<li class=''><a href=''>" + this.name + "</a></li>" );
            if (val instanceof Object) {
                if (this.hasOwnProperty('subNav')){
                    items.push("<ul>");
                    $.each(this.subNav , recurse);
                    items.push("</ul>");
                }
            }
        };
        $('#section-nav').append(items);
    });
});

它可以达到所有对象分支的深度，但是它不是将嵌套的对象放入嵌套的ul中，而是创建ul，/ ul对，并将下一个li与上一个li放在同一级别，如下所示：

<li><a>...etc</a></li>
<li><a>...etc</a></li>
<ul></ul>
<li><a>...etc</a></li>
<ul></ul>
<li><a>...etc</a></li>
<li><a>...etc</a></li>

而不是像这样（应该是这样）：

<li><a>...etc</a></li>
<li><a>...etc</a></li>
<li>
    <a>...etc</a>
    <ul>
        <li><a>...etc</a></li>
        <li><a>...etc</a></li>
        <li><a>...etc</a></li>
    </ul>
</li>

思考？

更新：在lyosef769的jsfiddle的帮助下解决了，他得到了答案！ 这是我需要的： http : //jsfiddle.net/brLh8g5b/1/

Answer 1

实际上，在字符串数组上调用jQuery的append会尝试将每个字符串添加为单独的元素。

因此["<ul>","<li>..</li>","<li>..</li>","</ul>"]数组将转换为ul元素，后跟两个li元素，并且jQuery忽略了最后一个标签，因为它无法解析它。

您应该调用$('#section-nav').append(items.join("")); 。 这样，jQuery将尝试将整个结构添加为单个字符串。

JSFiddle： http ： //jsfiddle.net/brLh8g5b/

Answer 2

http://jsfiddle.net/t79aLuec/

JAVASCRIPT

var tempData = [{“名称”：“水果”，“ subNav”：[{“名称”：“苹果”，“ subNav”：[{“名称”：“类型1”}，{“名称”：“类型2“}，{” name“：” Type 3“，” subNav“：[{” name“：” Type 3 A“}，{” name“：” Type 3 B“}]}]}]}]

var $ul = $('<ul></ul>');

function createList($list, items) {
    items.forEach(function(item){
        var $li = $('<li>');
        $li.text(item.name);

        if (item.subNav) {
            $li.append('<ul></ul>');

            createList($li.find('ul'), item.subNav);
        }

        $list.append($li);
    });
}

createList($ul, tempData);
$('body').append($ul);