我正在尝试下面的代码来获取复杂 JSON 数据中的每个级别的数据，并尝试在页面上显示如下
一级 - 欢迎
二级 - 主页、菜单 1、菜单 2 ...
第三级 - 第 1 页、第 2 页、父级页面 - 主页
第四级 - 第 11 页、第 12 页为父级第 1 页，
同样，Page21、Page22 为父级页面 2
JSON:
{
"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来获取但无法获取所有级别
Codepen 引用网址:
http://codepen.io/divyar34/pen/oZWGpL
预期 HTML 的 Codepen 接近于下面提到的 https://codepen.io/divyar34/pen/YZVgzr
最佳答案
需要更多jQuery() 。使用jQuery(html, attributes) 。注意，不确定是否 javascript在 stacksnippets 呈现完全预期的 html ;预计html不会出现在问题中，尽管您应该能够模拟模式以达到确切的预期结果。替换的重复项 id在"page1"对于 "page11" ，递增tabindex每个的值"A"类型，或<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>关于javascript - 使用 javascript/jquery 获取复杂嵌套 JSON 的各层数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42740833/