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

这个 branching/nesting 结构非常广泛，还有很多 '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

http://jsfiddle.net/t79aLuec/

JAVASCRIPT

var tempData = [{ "name": "Fruits", "subNav"：[{ "name": "Apples", "subNav"：[{ "name": "Type 1" }, { "name": "Type 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);

Answer 2

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

所以 ["<ul>","<li>..</li>","<li>..</li>","</ul>"] 的数组将被转换为一个 ul 元素，后面跟着两个 li 元素，并且 jQuery 忽略最后一个标签，因为它可以'解析它。

你应该打电话给 $('#section-nav').append(items.join(""));。这样 jQuery 将尝试将整个结构添加为单个字符串。

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

迭代 jQuery 格式化 JSON 不正确

Iterative jQuery formatting JSON incorrectly

javascript

iteration

jquery

json