使用javascript / jquery獲取復雜的嵌套JSON的各個級別的數據
[英]Getting each levels of data of complex nested JSON using javascript/jquery
問題描述
我正在嘗試下面的代碼來獲取復雜JSON數據中的每個數據級別，並嘗試在頁面上顯示如下
一級 -歡迎
第二級 -主頁，菜單1，菜單2 ...
第三級 -第1頁，第2頁，父級頁面-主頁
第四級-第11頁，父級的第12頁，第1頁
類似地，第21頁，第22頁為父級第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 URL供參考：
http://codepen.io/divyar34/pen/oZWGpL
預期HTML的Codepen接近於下面提到的https://codepen.io/divyar34/pen/YZVgzr
1 個解決方案
解決方案1
0 2017-03-11 21:31:28
需要更多jQuery() 。 使用jQuery(html, attributes) 。 請注意，不確定stacksnippets上的javascript是否呈現准確的預期html ； 預期的html不會出現在Question上，盡管您應該能夠模擬模式以獲得確切的預期結果。 在"page1"處將重復的id替換為"page11" ，將每種"A"類型或<a>元素的tabindex值遞增。
該方法應使用相似數量的代碼和行將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或JQuery跨站點獲取JSON數據
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.