迭代 jQuery 格式化 JSON 不正确答案

【问题标题】：Iterative jQuery formatting JSON incorrectly迭代 jQuery 格式化 JSON 不正确
【发布时间】：2015-07-15 18:28:02
【问题描述】：

我有一个包含许多嵌套对象的 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"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]

这个分支/嵌套结构非常广泛，并且还有很多“键：值”对，为了便于阅读，我将其省略。

我正在尝试创建可以遍历嵌套对象并将它们格式化为嵌套列表的迭代 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 的 jsfiddle 的帮助下解决了，他得到了答案！这是我需要的：http://jsfiddle.net/brLh8g5b/1/

【问题讨论】：

无论如何，<ul> 是另一个 <ul> 的直接子代是没有意义的 - 它们必须在 <li> 内。
好点。但这并不能真正解决 jQuery 问题...
你确定吗？如果您检测到子菜单，您是否尝试过添加包装器<li>？
在 lyosef769 的 jsfiddle 的帮助下得到了答案！这是我需要的：jsfiddle.net/brLh8g5b/1

标签： javascript jquery json iteration

【解决方案1】：

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

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

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

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

【讨论】：

这已经接近完美了！我刚刚意识到的唯一问题是我需要 UL 在其上方的 LI 内，因此在 JSON 的情况下，每次对象具有 subNav 时，UL 都应该在该对象内
在你的 jsfiddle 的帮助下解决了，所以你得到了答案！这是我需要的：jsfiddle.net/brLh8g5b/1

【解决方案2】：

http://jsfiddle.net/t79aLuec/

JAVASCRIPT

var tempData = [{ “名称”：“水果”， “子导航”：[{ “名称”：“苹果”， “子导航”：[{ “名称”：“类型 1” }, { “名称”：“类型 2” }, { “名称”：“类型 3”， “子导航”：[{ “名称”：“类型 3 A” }, { “名称”：“类型 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);

【讨论】：