¿Cómo puedo mostrar una lista anidada dinámica en JavaScript? Entonces, el problema es que no sé cuántos datos anidados tendré, pero quiero mostrarlos todos.
Ejemplo de los datos:
const data = [{ name: 'level1a', otherData: [ { name: 'level2a' }, { name: 'level2b' }, { name: 'level2c', otherData: [ { name: 'level3a', otherData: [ { name: 'level4a' }, { name: 'level4b' } ] }, { name: 'level3b' } ] } ] }]Esto es solo un ejemplo, y quiero mostrar en alguna lista todo esto. Esto debería ser dinámico porque no sé cuántos niveles tendré. Pueden ser 5, 10, 20... No sé, por eso debe ser dinámico.
Quiero mostrar algo como esto en html
level1a -- level2a -- level2b -- level2c -- level3a -- level4a -- level4b -- level3bPuede resolver este problema creando una función recursiva que recorre los datos anidados y crea nuevos nodos HTML en cada punto. Esta función tomará un contenedor inicial que proporcione y construirá su contenido recursivamente a través de la matriz anidada. Puede crear nodos de lista o contenedores simples y agregar su propio CSS para el estilo y la apariencia en cascada.
Aquí hay un ejemplo:
// 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" />Puede lograr esto usando una función de autoinvocación, luego puede usar css para formatear el primer nivel de alguna otra manera.
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>