使用javascript/jquery获取复杂嵌套JSON的每个级别的数据
使用javascript/jquery获取复杂嵌套JSON的每个级别的数据
提问于 2017-03-11 21:26:21
我正在尝试下面的代码来获取复杂JSON数据中的每个级别的数据，并试图在页面上显示如下所示
一级-欢迎
二级-家庭，Menu1，Menu2 .
第三级- Page1，Page2，Pagefor父级-Home
第四级- Page11，Page12表示父级页面1，
similarly Page21, Page22 forparent level Page 2杰森：
{
"type": "DIV",
"content": [{
"type": "H1",
"content": ["Welcome"]
}, {
"type": "HEADER",
"content": ["\n ", {
"type": "DIV",
"content": ["\n ", {
"type": "NAV",
"content": [{
"type": "DIV",
"content": ["\n ", {
"type": "H3",
"content": ["Home"]
}, {
"type": "UL",
"content": [{
"type": "LI",
"content": [{
"type": "A",
"content": ["Page1"],
"attributes": {
"id": "page1",
"class": "tertiaryLink",
"tabindex": "0",
"href": "https://zzzzzz/Page1.html",
"aria-label": "Page1",
"role": "treeitem",
"aria-setsize": "23",
"aria-posinset": "1",
"aria-level": "1"
}
},
{
"type": "UL",
"content": [{
"type": "LI",
"content": [{
"type": "A",
"content": ["Page11"],
"attributes": {
"id": "page1",
"class": "tertiaryLink",
"tabindex": "0",
"href": "https://zzzzzz/Page11.html",
"aria-label": "Page12",
"role": "treeitem",
"aria-setsize": "23",
"aria-posinset": "11",
"aria-level": "1"
}
}]
}, {
"type": "LI",
"content": [{
"type": "A",
"content": ["Page12"],
"attributes": {
"id": "page12",
"class": "tertiaryLink",
"tabindex": "0",
"href": "https://zzzzzz/Page12.html",
"aria-label": "Page1",
"role": "treeitem",
"aria-setsize": "23",
"aria-posinset": "12",
"aria-level": "1"
}
}]
}]
}
]
}, {
"type": "LI",
"content": [{
"type": "A",
"content": ["Page2"],
"attributes": {
"id": "page2",
"class": "tertiaryLink",
"tabindex": "0",
"href": "https://zzzzzz/Page2.html",
"aria-label": "Page2",
"role": "treeitem",
"aria-setsize": "23",
"aria-posinset": "1",
"aria-level": "2"
}
}]
}, {
"type": "LI",
"content": [{
"type": "A",
"content": ["Page3"],
"attributes": {
"id": "page3",
"class": "tertiaryLink",
"tabindex": "0",
"href": "https://zzzzzz/Page3.html",
"aria-label": "Page3",
"role": "treeitem",
"aria-setsize": "23",
"aria-posinset": "1",
"aria-level": "3"
}
}]
}]
}]
}, {
"type": "DIV",
"content": ["\n ", {
"type": "H3",
"content": ["Menu1"]
}, {
"type": "UL",
"content": [{
"type": "LI",
"content": [{
"type": "A",
"content": ["menuPage1"],
"attributes": {
"id": "menuPage1",
"class": "tertiaryLink",
"tabindex": "0",
"href": "https://zzzzzz/menu1.html",
"aria-label": "Page1",
"role": "treeitem",
"aria-setsize": "23",
"aria-posinset": "1",
"aria-level": "1"
}
}]
}, {
"type": "LI",
"content": [{
"type": "A",
"content": ["menuPage2"],
"attributes": {
"id": "menuPage2",
"class": "tertiaryLink",
"tabindex": "0",
"href": "https://zzzzzz/menu2.html",
"aria-label": "menuPage2",
"role": "treeitem",
"aria-setsize": "23",
"aria-posinset": "1",
"aria-level": "2"
}
}]
}, {
"type": "LI",
"content": [{
"type": "A",
"content": ["menuPage3"],
"attributes": {
"id": "menuPage3",
"class": "tertiaryLink",
"tabindex": "0",
"href": "https://zzzzzz/menu3.html",
"aria-label": "menuPage3",
"role": "treeitem",
"aria-setsize": "23",
"aria-posinset": "1",
"aria-level": "3"
}
}]
}]
}]
}]
}]
}]
}]
}我尝试使用递归的jquery来获取，但无法获得所有级别
供参考的代码URL：
http://codepen.io/divyar34/pen/oZWGpL
预期的HTML代码与下面提到的https://codepen.io/divyar34/pen/YZVgzr很接近
回答 1
Stack Overflow用户
发布于 2017-03-11 21:31:28
需要更多的jQuery()。使用jQuery(html, attributes)。注意，不确定堆栈段的javascript是否呈现准确的预期html；预期的html没有出现问题，尽管您应该能够模拟模式以实现准确的预期结果。将"page1"处的重复"page1"替换为"page11"、增加每个"A"类型的tabindex值或<a>元素。
这种方法应该使用类似数量的代码和行将html内容附加到document中，而不是解析嵌套数组的繁重任务，其中数组的元素可以是字符串和对象。
$("#c2")
.append(
$("<DIV>", {
"html": $("<H1>", {
"html": "Welcome"
})
}),
$("<HEADER>", {
"html": "\n",
"append": $("<DIV>", {
"html": "\n",
"append": $("<NAV>", {
"html": $("<DIV>", {
"html": "\n",
"append": $("<H3>", {
"html": "Home"
})
})
})
})
}),
$("<UL>", {
"html": $("<LI>", {
"html": $("<A>", {
"html": "Page1",
"id": "page1",
"class": "tertiaryLink",
"tabindex": "0",
"href": "https://zzzzzz/Page1.html",
"aria-label": "Page1",
"role": "treeitem",
"aria-setsize": "23",
"aria-posinset": "1",
"aria-level": "1"
})
})
}),
$("<UL>", {
"html": $("<LI>", {
"html": $("<A>", {
"html": "Page11",
"id": "page11",
"class": "tertiaryLink",
"tabindex": "1",
"href": "https://zzzzzz/Page1.html",
"aria-label": "Page1",
"role": "treeitem",
"aria-setsize": "23",
"aria-posinset": "11",
"aria-level": "1"
})
})
}),
$("<UL>", {
"html": $("<LI>", {
"html": $("<A>", {
"html": "Page12",
"id": "page12",
"class": "tertiaryLink",
"tabindex": "2",
"href": "https://zzzzzz/Page11.html",
"aria-label": "Page11",
"role": "treeitem",
"aria-setsize": "23",
"aria-posinset": "12",
"aria-level": "1"
})
})
}),
$("<DIV>", {
"html": $("<H3>", {
"html": "Welcome"
})
}),
$("<UL>", {
"html": $("<LI>", {
"html": $("<A>", {
"html": "menuPage1",
"id": "menuPage1",
"class": "tertiaryLink",
"tabindex": "3",
"href": "https://zzzzzz/menu1.html",
"aria-label": "Page1",
"role": "treeitem",
"aria-setsize": "23",
"aria-posinset": "1",
"aria-level": "1"
})
})
}),
$("<UL>", {
"html": $("<LI>", {
"html": $("<A>", {
"html": "menuPage2",
"id": "menuPage2",
"class": "tertiaryLink",
"tabindex": "4",
"href": "https://zzzzzz/menu2.html",
"aria-label": "Page1",
"role": "treeitem",
"aria-setsize": "23",
"aria-posinset": "1",
"aria-level": "2"
})
})
}),
$("<UL>", {
"html": $("<LI>", {
"html": $("<A>", {
"html": "menuPage3",
"id": "menuPage3",
"class": "tertiaryLink",
"tabindex": "5",
"href": "https://zzzzzz/menu1.html",
"aria-label": "Page1",
"role": "treeitem",
"aria-setsize": "23",
"aria-posinset": "1",
"aria-level": "1"
})
})
})
)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="c2"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42740833
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号