[英]Output nested JSON into <ul> with sub-list items
I have a JSON and am having trouble formatting it into a list with sub-list items. 我有JSON,但无法将其格式化为带有子列表项的列表。 I have it somewhat working, but could just be missing something simple, which I hope you guys can help me with.
我有一些工作,但可能只是缺少一些简单的东西,希望大家能为我提供帮助。
My JSON looks like this: 我的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" }
]
}
]
}
If an object does not have a 'subPageArray', I would like there to NOT be a sub-list under that item. 如果对象没有'subPageArray',我希望该项目下没有子列表。
My jQuery looks like this: 我的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");
});
And my HTML looks like this: 我的HTML看起来像这样:
<div class="siteMapContent">
<ul></ul>
</div>
I am hoping that the end result will look like this: 我希望最终结果将如下所示:
<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>
This is not the cleanest way but it does the job http://jsfiddle.net/8k6nw/ 这不是最干净的方法,但是可以完成工作http://jsfiddle.net/8k6nw/
You need to of course iterate over the subitem if present. 如果存在,您当然需要遍历子项目。
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>";
$.each(json.siteMap, function (i, val) {
var data="<li class='topLevel'><a href='/" + this.link + "'>" + this.title + "</a><ul>";
if(this.subPageArray!=undefined){ // TO check if subPageArray exists here in case of Green
for (i = 0; i < this.subPageArray.length; ++i) {
//Adding the internal li
data += "<li class='subLevel'><a href='/" + this.subPageArray[i].link + "'>" + this.subPageArray[i].subTitle + "</a></li>";
}
}
data+="</ul></li>";
$(data).appendTo(".siteMapContent .hii");
});
And your html code:I added a class name to ul so dynamically generated code doesn't get added to the inner ul 和您的html代码:我为ul添加了一个类名,因此动态生成的代码不会添加到内部ul
<div class="siteMapContent">
<ul class="hii"></ul>
</div>
Working fiddle: http://jsfiddle.net/Hp8ZY/3/ 工作提琴: http : //jsfiddle.net/Hp8ZY/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.