Estoy buscando una forma de convertir entre listas HTML anidadas arbitrariamente y JSON. Empecé con el ejemplo del componente web MDN expand -list-web-component

Ejemplo de lista anidada -

 <ul is="expanding-list" id="expl"> <li>UK <ul> <li>Yorkshire <ul> <li>Leeds <ul> <li>Train station</li> <li>Town hall</li> <li>Headrow</li> </ul> </li> <li>Bradford</li> <li>Hull</li> </ul> </li> </ul> </li> <li>USA <ul> <li>California <ul> <li>Los Angeles</li> <li>San Francisco</li> <li>Berkeley</li> </ul> </li> <li>Nevada</li> <li>Oregon</li> </ul> </li> </ul>

que podría expresarse en el siguiente formato JSON:

 { "UK": { "Yorkshire": { "Leeds": { "Train station": {}, "Town hall": {}, "Headrow": {} }, "Bradford": {}, "Hull": {} } }, "USA": { "California": { "Los Angeles": {}, "San Francisco": {}, "Berkeley": {} }, "Nevada": {}, "Oregon": {} } }

para extraer los textos de la lista anidada, lo intenté:

 const toJSON = async (elem) => { for (let i = 0; i < elem.childNodes.length; i += 1) { console.log('parentElement', elem.childNodes[i].parentElement); console.log('nodeType', elem.childNodes[i].nodeType); if (elem.childNodes[i].nodeType === 3) { // Node.TEXT_NODE (3) The actual Text inside an Element or Attr console.log('textContent', elem.childNodes[i].textContent); } toJSON(elem.childNodes[i]); } }; toJSON(document.getElementById('expl'));

pero esto registra muchas líneas nuevas además del contenido del texto y la relación padre-hijo no es obvia. Sospecho que mi requisito no es poco común y probablemente estoy reinventando la rueda. ¿Hay un mejor enfoque para resolver el problema?