How to convert Html ul/ol list to tree liked data structure with javascript?

Question

Could someone show me the most efficient way to convert an html ul/ol list string to a tree liked structure with plain javascript or 3rd libraries?

The html string and data structure may look like below, the property name in data is just for example:

Pushkin · Accepted Answer · 2020-04-02 07:20:41Z

1

I search for answers in SO to mark as duplicate. And to my dismay, I couldn't find an answer which will solve your problem.

But the silver lining is, it made me write my own function.

const $List = document.getElementById('list')

const processNode = node => {
  if (node.children.length) {
    const children = Array.from(node.children).map(child => {
      return processNode(child)
    })

    return {
      tag: node.localName,
      id: node.id,
      children
    }
  } else {
    return {
      tag: node.localName,
      id: node.id,
      content: node.innerText
    }
  }
}

const vList = processNode($List);

console.log(vList)

<ul id="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <ol>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
  </ol>
</ul>

answered Apr 2, 2020 at 7:20

Pushkin

3,6441 gold badge19 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to convert Html ul/ol list to tree liked data structure with javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related