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"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]

这种分支/嵌套结构相当广泛，并且有很多关键：价值＆＃39;我为了便于阅读而遗漏的对。

我正在尝试创建迭代的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><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的帮助下解决了他的问题，他得到了答案！这就是我需要的：http://jsfiddle.net/brLh8g5b/1/

Answer 1

在字符串数组上调用jQuery＆＃39; 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 $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);

迭代jQuery错误地格式化JSON

2 个答案: