Javascript 迭代jQuery格式化JSON不正确

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

$（文档）.ready（函数（）{
var-json；
$.getJSON（“megaNav.json”，函数（数据）{
var项目=[]；
$。每个（数据，递归）；
函数递归（键，val）{
项目。推送（“”；
if（对象的val实例）{
if（this.hasOwnProperty（'subNav'））{
项目。推送（“
”）；
$.each（this.subNav，递归）；
项目。推送（“
”）；
}
}
};
$（'部分导航'）。附加（项目）；
});
});

它用于到达所有对象分支的深度，但是，它不会将嵌套对象放入嵌套的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>

JAVASCRIPT

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

var$ul=$（'
'）；
函数createList（$list，items）{
items.forEach（功能（项目）{
变量$li=$（“
”）；
$li.文本（项目名称）；
若有（子项AV）{
$li.追加（“
”）；
createList（$li.find（'ul'），item.subNav）；
}
$list.append（$li）；
});
}
createList（$ul，tempData）；
$（'body'）。追加（$ul）；
在字符串数组上调用jQuery的
append
实际上试图将每个字符串作为单独的元素添加

因此，
[“
”、“
。
”、“
。
”、“
”]
的数组将被转换为一个
ul
元素，后跟两个
li
元素，jQuery将忽略最后一个标记，因为它无法解析它

您应该调用
$（'#section nav'）.append（items.join（“”））。这样，jQuery将尝试将整个结构添加为单个字符串

jsIDLE:
一个
是另一个
的直接孩子是没有意义的-他们必须在一个
的内部。这一点很好。但这并不能真正解决jQuery问题……你确定吗？您是否尝试过在检测到子菜单的情况下添加包装器？在lyosef769的JSFIDLE的帮助下解决了这个问题。他得到了答案！我需要的是：这几乎是完美的！我刚刚意识到的唯一问题是，我需要UL位于它上面的LI中，因此在JSON的情况下，每当一个对象有一个子AV时，UL应该位于该对象中，并在JSFIDLE的帮助下解决，这样您就可以得到答案了！我需要的是：
<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>

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);