[英]Displaying nested JSON tables
我需要一个解决方案来解决这个问题,仅使用 JS、HTML、CSS。
获取 json 数据并将其显示在 HTML 元素上,这应该是这样的:结果
这是我到目前为止所做的: https://jsfiddle.net/o0bnjhqm/2/
这是data.json文件,用于从以下位置获取数据:
[
{
"id": "1",
"name": "google",
"url": "www.google.com",
"subData": [
{
"id": "2",
"name": "walla",
"url": "www.walla.co.il"
},
{
"id": "3",
"name": "ynet",
"url": "www.ynet.co.il",
"subData": [
{
"id": "4",
"name": "mako",
"url": "www.mako.co.il"
},
{
"id": "5",
"name": "google",
"url": "www.google.com"
},
{
"id": "6",
"name": "walla",
"url": "www.walla.co.il"
}
]
},
{
"id": "7",
"name": "google",
"url": "www.google.com"
}
]
},
{
"id": "8",
"name": "ynet",
"url": "www.ynet.co.il",
"subData": [
{
"id": "9",
"name": "walla",
"url": "www.walla.co.il"
},
{
"id": "10",
"name": "google",
"url": "www.google.com",
"subData": [
{
"id": "11",
"name": "ynet",
"url": "www.ynet.co.il",
"subData": [
{
"id": "12",
"name": "walla",
"url": "www.walla.co.il"
},
{
"id": "13",
"name": "google",
"url": "www.google.com"
},
{
"id": "14",
"name": "mako",
"url": "www.mako.co.il"
}
]
},
{
"id": "15",
"name": "google",
"url": "www.google.com"
},
{
"id": "16",
"name": "mako",
"url": "www.mako.co.il"
}
]
},
{
"id": "17",
"name": "walla",
"url": "www.walla.co.il",
"subData": [
{
"id": "18",
"name": "ynet",
"url": "www.ynet.co.il"
},
{
"id": "19",
"name": "google",
"url": "www.google.com"
},
{
"id": "20",
"name": "walla",
"url": "www.walla.co.il"
}
]
},
{
"id": "21",
"name": "mako",
"url": "www.mako.co.il"
}
]
}
]
___________________________________________________________________-
var json = [ { "id": "1", "name": "google", "url": "www.google.com", "subData": [ { "id": "2", "name": "walla", "url": "www.walla.co.il" }, { "id": "3", "name": "ynet", "url": "www.ynet.co.il", "subData": [ { "id": "4", "name": "mako", "url": "www.mako.co.il" }, { "id": "5", "name": "google", "url": "www.google.com" }, { "id": "6", "name": "walla", "url": "www.walla.co.il" } ] }, { "id": "7", "name": "google", "url": "www.google.com" } ] }, { "id": "8", "name": "ynet", "url": "www.ynet.co.il", "subData": [ { "id": "9", "name": "walla", "url": "www.walla.co.il" }, { "id": "10", "name": "google", "url": "www.google.com", "subData": [ { "id": "11", "name": "ynet", "url": "www.ynet.co.il", "subData": [ { "id": "12", "name": "walla", "url": "www.walla.co.il" }, { "id": "13", "name": "google", "url": "www.google.com" }, { "id": "14", "name": "mako", "url": "www.mako.co.il" } ] }, { "id": "15", "name": "google", "url": "www.google.com" }, { "id": "16", "name": "mako", "url": "www.mako.co.il" } ] }, { "id": "17", "name": "walla", "url": "www.walla.co.il", "subData": [ { "id": "18", "name": "ynet", "url": "www.ynet.co.il" }, { "id": "19", "name": "google", "url": "www.google.com" }, { "id": "20", "name": "walla", "url": "www.walla.co.il" } ] }, { "id": "21", "name": "mako", "url": "www.mako.co.il" } ] } ] var html = "<ul>"; var item = json; json.forEach(function(item) { html += "<div>Id:"+item.id+" <br/> Site Name:"+item.name+"<br/>Site Url: <a href='"+item.url+"'>"+item.name+"</a>"; item.subData.forEach(function callback(value, index) { html += "<div>Id:"+item.subData[index].id+" <br/> Site Name:"+item.subData[index].name+"<br/>Site Url: <a href='"+item.subData[index].url+"'>"+item.subData[index].name+"</a>"; if(item.subData[index].subData){ item.subData[index].subData.forEach(function callback(value, index2) { html += "<div>Id:"+item.subData[index].subData[index2].id+" <br/> Site Name:"+item.subData[index].subData[index2].name+"<br/>Site Url: <br/><a href='"+item.subData[index].subData[index2].url+"'>"+item.subData[index].subData[index2].name+"</a>"; if(item.subData[index].subData[index2].subData){ item.subData[index].subData[index2].subData.forEach(function callback(value, index3) { html += "<div>Id:"+item.subData[index].subData[index2].subData[index3].id+" <br/> Site Name:"+item.subData[index].subData[index2].subData[index3].name+"<br/>Site Url: <a href='"+item.subData[index].subData[index2].subData[index3].url+"'>"+item.subData[index].subData[index2].subData[index3].name+"</a>"; html += "</div>"; }); } html += "</div>"; }); } html += "</div>"; }); html += "</div>"; }); document.body.innerHTML = html + "</div>";
div{ color:black; width: max-content; height: max-content; background-color: #fefefe; border: 1px solid #d2d2d2; border-radius: 10px; padding: 10px; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.