Cree una estructura dinámica para OL LI basada en JSON a continuación y también proporcione datos JSON y formato de estructura OL LI. así que por favor revisa esto.
El formato de datos Json es:
let dataArray = [{ parent1: { id: 1, title: 'Parent', parentId: null, children: [{ child: { id: 2, title: 'Child-1', parentId: 1, children: [{ child: { id: 4, title: 'Child-1.1', parentId: 2, children: [{ child: { id: 6, title: 'Child-1.1.1', parentId: 4, children: [] } }] } }] } }, { child: { id: 3, title: 'Child-2', parentId: 1, children: [{ child: { id: 5, title: 'Child-2.1', parentId: 3, children: [] } }] } }, ] } }]Para ejemplo de ejemplo de formato OL LI:
<ol class="organizational-chart"> <li> <div>Parent</div> <ol> <li> <div>Child-1</div> <ol> <li> <div>Child-1.1</div> </li> </ol> </li> <li> <div>Child-2</div> <ol> <li> <div>Child-2.1</div> <ol> <li> <div>Child-2.1.</div> <ol> <li> <div>Child-2.1.1</div> </li> </ol> </li> </ol> </li> </ol> </li> </li> </ol> ¿Cómo crear la estructura <ol><li> anterior según JSON a continuación?
var dataArray = [{ parent1: { id: 1, title: 'Parent', parentId: null, children: [{ child: { id: 2, title: 'Child-1', parentId: 1, children: [{ child: { id: 4, title: 'Child-1.1', parentId: 2, children: [{ child: { id: 6, title: 'Child-1.1.1', parentId: 4, children: [] } }] } }] } }, { child: { id: 3, title: 'Child-2', parentId: 1, children: [{ child: { id: 5, title: 'Child-2.1', parentId: 3, children: [] } }] } }, ] } }] function li(){ return document.createElement("li"); } function ol(){ return document.createElement("ol"); } function div(){ return document.createElement("div"); } function addList(rawData, node){ let parent = ol(); const {parent1, parent: parent2, child} = rawData; //since data is not defined, so taking these keys as per data //taking data let data; if(parent1) data = parent1; else if(parent2) data = parent2; else data = child; node.appendChild(parent); //append parent node to the grandParent passed parent.innerHTML = `<div>${data.title}</div>`; //add title div data.children?.forEach((ele) => { //loop over children let child = li(); parent.appendChild(child); //append li tag addList(ele, child); //run recursion for adding children on this li component }); } dataArray.forEach((data) => addList(data, document.getElementById("root"))) <div id="root"></div>Debe usar bucles y recurrencia para crear la lista anidada. Este es un pseudocódigo que debe "traducir" a javascript adecuado.
dataArray.forEach(rootNode => { const element = createList(rootNode); document.body.appendChild(element); }); // create elements function createList(node) { const ol = cretateOlElement(node); node.children.forEach(listItem => { const li = createListItem(ol, listItem); // recursively check for children and call createList again ol.appendChild(li); }); return ol; }