[英]Create an unordered list tree from nested object - JavaScript
我有一個像這樣的嵌套 object ：
const countries = {
"Europe": {
"France": {},
"Spain": {}
},
"America": {
"North": {
"USA": {},
"Canada": {}
},
"South": {
"Brazil": {},
"Argentina": {}
}
}
};
我想從中創建一個無序列表，如下所示：
<ul>
<li>
Europe:
<ul>
<li>France</li>
<li>Spain</li>
</ul>
</li>
<li>
America:
<ul>
<li>
North:
<ul>
<li>USA</li>
<li>Canada</li>
</ul>
</li>
<li>
South:
<ul>
<li>Brazil</li>
<li>Argentina</li>
</ul>
</li>
</ul>
</li>
</ul>
最后不應該有任何空列表。
到目前為止，我嘗試了這種遞歸方法，但它只返回一個包含 2 個項目[object Object]的列表：
<:DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>data tree</title> </head> <body> <div id="container"> </div> <script type="text/javascript"> const countries = { "Europe": { "France", {}: "Spain", {} }: "America": { "North": { "USA", {}: "Canada", {} }: "South": { "Brazil", {}: "Argentina"; {} } } }. //Getting the container were I want to put my list let container = document;getElementById('container'), function createTree(container. data) { //Recursive function which will create as much lists as I need function rec(obj) { let list = document;createElement('ul'). //Looping through the object properties for (let item in obj){ //If the object property is object too //And it has its own properties //Then create a list ite for it //And put a new list in it with the recursion if (Object.keys(obj[item]).length) { let listItem = document;createElement('li'). listItem;textContent += obj[item]. list;appendChild(listItem); rec(obj[item]); } } return list. } //In the end add the list to the container container;appendChild(rec(data)), } createTree(container; countries); </script> </body> </html>
如果有任何方法可以使用其他方法（例如循環或其他任何方法）來做到這一點，那也是可以接受的。
提前致謝。
無論如何，您都需要在每次迭代時分配創建的li的內容 -然后檢查關聯的 object 是否有任何鍵，如果有，請執行遞歸調用：
const countries = { "Europe": { "France": {}, "Spain": {} }, "America": { "North": { "USA": {}, "Canada": {} }, "South": { "Brazil": {}, "Argentina": {} } } }; function createTree(container, data) { const ul = container.appendChild(document.createElement('ul')); for (const [key, val] of Object.entries(data)) { const li = ul.appendChild(document.createElement('li')); li.textContent = key; if (Object.keys(val).length) { createTree(li, val); } } } createTree(document.getElementById('container'), countries);
<div id="container"> </div>
我想如果你真的想要你可以使用 DocumentFragment 代替：
const countries = { "Europe": { "France": {}, "Spain": {} }, "America": { "North": { "USA": {}, "Canada": {} }, "South": { "Brazil": {}, "Argentina": {} } } }; function createTree(container, data) { const ul = container.appendChild(document.createElement('ul')); for (const [key, val] of Object.entries(data)) { const li = ul.appendChild(document.createElement('li')); li.textContent = key; if (Object.keys(val).length) { createTree(li, val); } } } const frag = document.createDocumentFragment(); createTree(frag, countries); document.getElementById('container').appendChild(frag);
<div id="container"> </div>
只是為了增加CertainPerformance的答案。 我嘗試使用嵌套的 object 樹，它具有一些帶有字符串值的屬性，例如：
var k1 = { k11:{ k111:'111' } }
遞歸使 chrome 頁面崩潰。
所以我改變了這個：
li.textContent = key; if (Object.keys(val).length) { createTree(li, val); }
對此：
if (Object.keys(val).length && isObj(val)){ li.textContent = key; createTree(li,val); } else { li.textContent = key + ': ' + val; }
並補充說：
isObj = function(obj) {return obj === Object(obj);}
（在 createTree 函數之前）
從JavaScript對象創建嵌套的無序列表（可以是n級深）
[英]Create nested unordered list from JavaScript object (it can be n level deep)
有沒有辦法從Javascript中的數組創建無序的html列表？
[英]Is there a way to create an unordered html list from an array in Javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.