Estoy tratando de crear un JSON válido a partir de las identificaciones de li en una lista desordenada anidada: por ejemplo, aquí hay una lista de ejemplo. Solo para aclarar, NO quiero crear la lista UL, sino el JSON de los li id.
<ul class="list"> <li id="p1">1234</li> <li id="p2">1234 <ul> <li id="s1">sdfg</li> <li id="s2">sdfg <ul> <li id="sq1">sdfg</li> <li id="sq2">sdfg</li> </ul> </li> </ul> </li> <li id="p6">1234</li> <li id="p8">1234</li> </ul>El JSON debería leer algo como esto:
[ { "item": "p1" }, { "item": "p2", "data": [ { "item": "s1" }, { "item": "s2", "data": [ { "item": "sq1" }, { "item": "sq2" } ] } ] }, { "item": "p6" }, { "item": "p8" } ]Estoy tratando de crearlo así:
let $arr = [] document.querySelectorAll("ul.list li").forEach($li => { if ($li.querySelector("ul:first-of-type")) { let $data = []; $li.querySelectorAll("ul:first-of-type li").forEach($li1 => { $data.push({ "item": $li1.id }) }) $arr.push({ "item": $li.id, "data": $data }) } else { $arr.push({ "item": $li.id }) } })Pero no está creando el JSON correcto: cualquier pista/ayuda que cree el JSON correcto será muy apreciada, gracias de antemano.
Deberá recorrer el árbol para construir su objeto, luego JSON.stringify . Aquí usando un bucle recursivo simple, pero también podría mirar a TreeWalker, que está hecho para atravesar el DOM.
function buildTree(parent) { let result = []; for (const child of parent.children) { const data = buildTree(child); if (child.id === '') { result = data; } else { result.push({ item: child.id, ...(data.length ? { data } : {}) }); } } return result; } const tree = buildTree(document.querySelector('.list')); console.log(JSON.stringify(tree, null, 2)); <ul class="list"> <li id="p1">1234</li> <li id="p2">1234 <ul> <li id="s1">sdfg</li> <li id="s2">sdfg <ul> <li id="sq1">sdfg</li> <li id="sq2">sdfg</li> </ul> </li> </ul> </li> <li id="p6">1234</li> <li id="p8">1234</li> </ul>