Javascript 将嵌套JSON输出到<；ul>；带有子列表项

我有一个JSON，在将其格式化为包含子列表项的列表时遇到了问题。我有一些工作，但可能只是错过了一些简单的，我希望你们能帮助我

我的JSON如下所示：

var json = {
    "siteMap": [
        {
            "title": "Red",
            "link": "red.html",
            "subPageArray": [
                { "subTitle": "SubLink1", "link": "test1.html" },
                { "subTitle": "SubLink2", "link": "test2.html" }
            ]
        },
        {
            "title": "Blue",
            "link": "blue.html",
            "subPageArray": [
                { "subTitle": "SubLink1", "link": "test1.html" },
                { "subTitle": "SubLink2", "link": "test2.html" }
            ]
        },
        {
            "title": "Green",
            "link": "green.html"
        },
        {
            "title": "Yellow",
            "link": "yellow.html",
            "subPageArray": [
                { "subTitle": "SubLink1", "link": "test1.html" },
                { "subTitle": "SubLink2", "link": "test2.html" }
            ]
        }
    ]
}

$.each(json.siteMap, function (i, val) {
    var i = 0,
        a = i++,
        data = "<li class='topLevel'><a href='/" + this.link + "'>" + this.title + "</a><ul><li class='subLevel'><a href='/" + this.subPageArray[i].link + "'>" + this.subPageArray[a].subTitle + "</a></li></ul></li>";
        i++;    
        $(data).appendTo(".siteMapContent ul");
});

<div class="siteMapContent">
    <ul></ul>
</div>

<ul>
    <li><a href="red.html">Red</a>
        <ul>
            <li><a href="test1.html">SubLink1</a></li>
            <li><a href="test2.html">SubLink2</a></li>
        </ul>
    </li>
    <li><a href="blue.html">Blue</a>
        <ul>
            <li><a href="test1.html">SubLink1</a></li>
            <li><a href="test2.html">SubLink2</a></li>
        </ul>
    </li>
    <li><a href="green.html">Green</a></li>
    <li><a href="yellow.html">Yellow</a>
        <ul>
            <li><a href="test1.html">SubLink1</a></li>
            <li><a href="test2.html">SubLink2</a></li>
        </ul>
    </li>
</ul>

如果一个对象没有“subPageArray”，我希望该项下没有子列表

我的jQuery如下所示：

var json = {
    "siteMap": [
        {
            "title": "Red",
            "link": "red.html",
            "subPageArray": [
                { "subTitle": "SubLink1", "link": "test1.html" },
                { "subTitle": "SubLink2", "link": "test2.html" }
            ]
        },
        {
            "title": "Blue",
            "link": "blue.html",
            "subPageArray": [
                { "subTitle": "SubLink1", "link": "test1.html" },
                { "subTitle": "SubLink2", "link": "test2.html" }
            ]
        },
        {
            "title": "Green",
            "link": "green.html"
        },
        {
            "title": "Yellow",
            "link": "yellow.html",
            "subPageArray": [
                { "subTitle": "SubLink1", "link": "test1.html" },
                { "subTitle": "SubLink2", "link": "test2.html" }
            ]
        }
    ]
}

$.each(json.siteMap, function (i, val) {
    var i = 0,
        a = i++,
        data = "<li class='topLevel'><a href='/" + this.link + "'>" + this.title + "</a><ul><li class='subLevel'><a href='/" + this.subPageArray[i].link + "'>" + this.subPageArray[a].subTitle + "</a></li></ul></li>";
        i++;    
        $(data).appendTo(".siteMapContent ul");
});

<div class="siteMapContent">
    <ul></ul>
</div>

<ul>
    <li><a href="red.html">Red</a>
        <ul>
            <li><a href="test1.html">SubLink1</a></li>
            <li><a href="test2.html">SubLink2</a></li>
        </ul>
    </li>
    <li><a href="blue.html">Blue</a>
        <ul>
            <li><a href="test1.html">SubLink1</a></li>
            <li><a href="test2.html">SubLink2</a></li>
        </ul>
    </li>
    <li><a href="green.html">Green</a></li>
    <li><a href="yellow.html">Yellow</a>
        <ul>
            <li><a href="test1.html">SubLink1</a></li>
            <li><a href="test2.html">SubLink2</a></li>
        </ul>
    </li>
</ul>

$。每个（json.siteMap，函数（i，val）{
var i=0，
a=i++，
data=“
”；
i++；
$（数据）。附加到（“.siteMapContent ul”）；
});

我的HTML如下所示：

var json = {
    "siteMap": [
        {
            "title": "Red",
            "link": "red.html",
            "subPageArray": [
                { "subTitle": "SubLink1", "link": "test1.html" },
                { "subTitle": "SubLink2", "link": "test2.html" }
            ]
        },
        {
            "title": "Blue",
            "link": "blue.html",
            "subPageArray": [
                { "subTitle": "SubLink1", "link": "test1.html" },
                { "subTitle": "SubLink2", "link": "test2.html" }
            ]
        },
        {
            "title": "Green",
            "link": "green.html"
        },
        {
            "title": "Yellow",
            "link": "yellow.html",
            "subPageArray": [
                { "subTitle": "SubLink1", "link": "test1.html" },
                { "subTitle": "SubLink2", "link": "test2.html" }
            ]
        }
    ]
}

$.each(json.siteMap, function (i, val) {
    var i = 0,
        a = i++,
        data = "<li class='topLevel'><a href='/" + this.link + "'>" + this.title + "</a><ul><li class='subLevel'><a href='/" + this.subPageArray[i].link + "'>" + this.subPageArray[a].subTitle + "</a></li></ul></li>";
        i++;    
        $(data).appendTo(".siteMapContent ul");
});

<div class="siteMapContent">
    <ul></ul>
</div>

<ul>
    <li><a href="red.html">Red</a>
        <ul>
            <li><a href="test1.html">SubLink1</a></li>
            <li><a href="test2.html">SubLink2</a></li>
        </ul>
    </li>
    <li><a href="blue.html">Blue</a>
        <ul>
            <li><a href="test1.html">SubLink1</a></li>
            <li><a href="test2.html">SubLink2</a></li>
        </ul>
    </li>
    <li><a href="green.html">Green</a></li>
    <li><a href="yellow.html">Yellow</a>
        <ul>
            <li><a href="test1.html">SubLink1</a></li>
            <li><a href="test2.html">SubLink2</a></li>
        </ul>
    </li>
</ul>

---

我希望最终结果是这样的：

var json = {
    "siteMap": [
        {
            "title": "Red",
            "link": "red.html",
            "subPageArray": [
                { "subTitle": "SubLink1", "link": "test1.html" },
                { "subTitle": "SubLink2", "link": "test2.html" }
            ]
        },
        {
            "title": "Blue",
            "link": "blue.html",
            "subPageArray": [
                { "subTitle": "SubLink1", "link": "test1.html" },
                { "subTitle": "SubLink2", "link": "test2.html" }
            ]
        },
        {
            "title": "Green",
            "link": "green.html"
        },
        {
            "title": "Yellow",
            "link": "yellow.html",
            "subPageArray": [
                { "subTitle": "SubLink1", "link": "test1.html" },
                { "subTitle": "SubLink2", "link": "test2.html" }
            ]
        }
    ]
}

$.each(json.siteMap, function (i, val) {
    var i = 0,
        a = i++,
        data = "<li class='topLevel'><a href='/" + this.link + "'>" + this.title + "</a><ul><li class='subLevel'><a href='/" + this.subPageArray[i].link + "'>" + this.subPageArray[a].subTitle + "</a></li></ul></li>";
        i++;    
        $(data).appendTo(".siteMapContent ul");
});

<div class="siteMapContent">
    <ul></ul>
</div>

<ul>
    <li><a href="red.html">Red</a>
        <ul>
            <li><a href="test1.html">SubLink1</a></li>
            <li><a href="test2.html">SubLink2</a></li>
        </ul>
    </li>
    <li><a href="blue.html">Blue</a>
        <ul>
            <li><a href="test1.html">SubLink1</a></li>
            <li><a href="test2.html">SubLink2</a></li>
        </ul>
    </li>
    <li><a href="green.html">Green</a></li>
    <li><a href="yellow.html">Yellow</a>
        <ul>
            <li><a href="test1.html">SubLink1</a></li>
            <li><a href="test2.html">SubLink2</a></li>
        </ul>
    </li>
</ul>

$。每个（json.siteMap，函数（i，val）{
var data=“
”；
if（this.subPageArray！=undefined）{//检查此处是否存在绿色的subPageArray
对于（i=0；i”；
}
}
数据+=“
”；
$（data.appendTo（“.siteMapContent.hii”）；
});

还有你的html代码：我给ul添加了一个类名，所以动态生成的代码不会添加到内部ul

<div class="siteMapContent">
    <ul class="hii"></ul>
</div>

---

工作小提琴：

这不是最干净的方法，但它确实起作用

当然，您需要迭代子项（如果存在）

var html = "<ul>";

json.siteMap.forEach(function(item) {

    html += "<li><a href='"+item.link+"'>"+item.title+"</a>";

    if (item.subPageArray) {

        html += "<ul>";

        item.subPageArray.forEach(function(subitem) {

              html += "<li><a href='"+subitem.link+"'>"+subitem.subTitle+"</a></li>";      

        });

        html += "</ul>";

    }

    html += "</li>";
});

document.body.innerHTML = html + "</ul>";

var html=“
”；
json.siteMap.forEach（函数（项）{
html+=“
”；
if（item.subPageArray）{
html+=“
”；
item.subPageArray.forEach（函数（子项）{
html+=“
”；
});
html+=“
”；
}
html+=“
”；
});
document.body.innerHTML=html+“
”；

你能做一个jsfiddle吗？问题是：@NickJ checkout我的答案它正在工作..你需要注意编写干净的代码，因为你的JS代码片段非常混乱。首先，为什么要使用$。如果要将回调范围内的“i”声明为0，则将其作为索引并忽略它。a=i++也是要避免的。除了“标准”附加之外，尝试使用javascript模板引擎，如Handlebar（或任何其他）这非常有效，但是，有没有一种方法可以在没有“document.body.innerHTML”的情况下使用它。这将删除页面的其余内容。此代码仅取自JSFIDLE，它需要document.body。我所演示的不仅仅是提供您需要的代码。只需使用html+=“”；取而代之的是，使用html变量做你需要的事情。它可以工作，但是代码不是很干净，因为仍然是基于海报的。与我在原始帖子上的评论相同，但这里更混乱的是，get assign i刚刚在上面一行中被覆盖。然后我再次在for循环中声明，a再次在循环中声明，但它从未使用过。谢谢，这太棒了！