How can I show dynamic nested list in JavaScript. So, problem is that I don't know how many nested data I will have, but I want to show all of them.
Example of the data:
const data = [{
name: 'level1a',
otherData: [
{
name: 'level2a'
},
{
name: 'level2b'
},
{
name: 'level2c',
otherData: [
{
name: 'level3a',
otherData: [
{
name: 'level4a'
},
{
name: 'level4b'
}
]
},
{
name: 'level3b'
}
]
}
]
}]This is just example, and I want to show in some list all this. This should be dynamic because I don't know how many levels I will have. It can be 5, 10, 20...I don't know, that's why it should be dynamic.
I want to show something like this in html
level1a
-- level2a
-- level2b
-- level2c
-- level3a
-- level4a
-- level4b
-- level3bYou can solve this problem by creating a recursive function that loops through the nested data and creates new HTML nodes at each point. This function will take an initial container that you provide, and it builds its contents recursively throught the nested array. You can create list nodes or simple containers and add your own CSS for styling and the cascading look.
Here's an example:
// 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" />You can achieve this using a self-invoking function, than you can use css to format first level in some other way.
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>