如何在 JavaScript 中顯示動態嵌套串列。所以，問題是我不知道我會有多少嵌套資料，但我想顯示所有這些。
資料示例：
const data = [{
name: 'level1a',
otherData: [
{
name: 'level2a'
},
{
name: 'level2b'
},
{
name: 'level2c',
otherData: [
{
name: 'level3a',
otherData: [
{
name: 'level4a'
},
{
name: 'level4b'
}
]
},
{
name: 'level3b'
}
]
}
]
}]這只是示例，我想在一些串列中顯示所有這些。這應該是動態的，因為我不知道我會有多少級別。它可以是 5、10、20……我不知道，這就是為什么它應該是動態的。
我想在 html 中顯示這樣的東西
level1a
-- level2a
-- level2b
-- level2c
-- level3a
-- level4a
-- level4b
-- level3buj5u.com熱心網友回復：
您可以使用自呼叫函式來實作這一點，而不是使用 css 以其他方式格式化第一級。
const data = [{
name: 'level1a',
otherData: [
{
name: 'level2a'
},
{
name: 'level2b'
},
{
name: 'level2c',
otherData: [
{
name: 'level3a',
otherData: [
{
name: 'level4a'
},
{
name: 'level4b'
}
]
},
{
name: 'level3b'
}
]
}
]
}];
generate(data, document.getElementById("container"));
function generate(data, parent) {
const ul = document.createElement("ul");
data.forEach((el) => {
const li = document.createElement("li");
li.innerHTML = el.name;
if(el.otherData) generate(el.otherData,li);
ul.appendChild(li);
});
parent.appendChild(ul);
}<div id="container"></div>uj5u.com熱心網友回復：
您可以通過創建一個遞回函式來解決這個問題，該函式回圈遍歷嵌套資料并在每個點創建新的 HTML 節點。此函式將采用您提供的初始容器，并通過嵌套陣列遞回構建其內容。您可以創建串列節點或簡單容器，并添加您自己的 CSS 以進行樣式設定和級聯外觀。
下面是一個例子：
// recursively add text and loop through nested data
function displayNested(container, data) {
data?.forEach(({ label, children }) => {
// create text node
const elementText = document.createTextNode(label);
// create new container for the element
const elementDiv = document.createElement('div');
// add CSS class for nested display
elementDiv.classList.add('container');
// append text element to new container
elementDiv.appendChild(elementText);
// append new container to the current container
container.appendChild(elementDiv);
// recursively do the same for the current data's children
displayNested(elementDiv, children);
});
}
const data = [{
label: 'level1a',
children: [{
label: 'level2a'
}, {
label: 'level2b'
}, {
label: 'level2c',
children: [{
label: 'level3a',
children: [{
label: 'level4a'
}, {
label: 'level4b'
}]
}, {
label: 'level3b'
}]
}]
}];
const container = document.getElementById('main-container');
displayNested(container, data);.container {
padding: 0px 16px;
}<div id="main-container" />轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/341247.html