我有一个 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" }
]
}
]
}
如果一个对象没有“subPageArray”,我希望该项目下没有子列表。
我的 jQuery 看起来像这样:
$.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");
});
我的 HTML 看起来像这样:
<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>
最佳答案
这不是最干净的方式,但它可以完成工作 http://jsfiddle.net/8k6nw/
当然,您需要迭代子项目(如果存在)。
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>";
关于javascript - 将嵌套 JSON 输出到带有子列表项的 <ul> 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24147644/