.then(function renderTree (data){ Object.entries(data).map((item, index) => { let container = document.querySelector(".container") let li = document.createElement("li") li.id = `${item[1].id}` container.appendChild(li) let span = document.createElement("span") span.innerHTML = `${item[1].name}` li.appendChild(span) let ul = document.createElement("ul") ul.innerHTML = renderTree(item[1].children) li.appendChild(ul) // gerarLi(item[1].id, item[1].name) }) }) Estoy tratando de continuar con los niños dentro de un <ul> , la continuación está en:
ul.innerHTML = renderTree(item[1].children)Pero este código no funciona, mi index.html regresa como:
<ul>undefined</ul>¿Qué puedo hacer para esto?
Hice mis propios data prueba y jugué un poco con su código. Estos fueron los puntos que encontré:
renderTree() siempre colocó elementos directamente en el div .container . Esto solo debería suceder para la llamada externa.return nada de tu función renderTree() . Cambié la función de modo que ahora devuelve una cadena HTML para colocarla dentro de una estructura <ul> . Esta función ahora se puede llamar recursivamente de forma segura.
const data={abc:{id:"first",name:"number one"}, def:{id:"second",name:"el segundo"}, ghi:{id:"third",name:"der dritte", children:{jkl:{id:"fourth",name:"child one"},mno:{id:"fifth",name:"child two"}}}}; function renderTree(data){ // returns an HTML string for a <UL> DOM element return Object.values(data).map(({id,name,children}) => { let li = document.createElement("li"); li.id = id; let span = document.createElement("span"); span.innerHTML = name; li.appendChild(span); let ul = document.createElement("ul"); if (children){ ul.innerHTML = renderTree(children); li.appendChild(ul); } return li.outerHTML; }).join("\n"); } document.querySelector(".container").innerHTML=renderTree(data); span {color:blue} <ul class="container"></ul> También cambié Object.entries() a Object.values() ya que nunca usas las claves de los objetos procesados.