顯示嵌套的 JSON 表

Question

我需要一個解決方案來解決這個問題，僅使用 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"
            }
        ]
    }
]

___________________________________________________________________-

Answer 1

 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; }