Создать Html Древовидное представление с собственным javascript / HTML

Question

Мне нужно создать вид дерева HTML / CSS, как в примере из уже созданного объекта, используя собственный javascript.

. Пожалуйста, предложите,

BR

Answer 1

Вы можете сначала построить вложенную структуру, а затем использовать рекурсивный подход, чтобы также создать html из этих данных, где, если текущий элемент имеет свойство children, вы снова вызываете функцию с этим массивом children в качестве параметра данных.

var data = [{"name":"container-1","type":"container","description":"container description"},{"name":"category-1","type":"category","parent":"container-1"},{"name":"grid-1","type":"grid","parent":"category-1"},{"name":"chart-1","type":"chart","parent":"category-1"},{"name":"container-2","type":"container"},{"name":"category-2","type":"category","parent":"container-2"},{"name":"category-3","type":"category","parent":"container-2"},{"name":"grid-2","type":"grid","parent":"category-2"},{"name":"chart-2","type":"chart","parent":"category-2"},{"name":"grid-3","type":"grid","parent":"category-3"}]

function toTree(data, pid = undefined) {
  return data.reduce((r, e) => {
    if (pid == e.parent) {
      const obj = { ...e }
      const children = toTree(data, e.name)
      if (children.length) obj.children = children;
      r.push(obj)
    }

    return r
  }, [])
}

function toHtml(data, isRoot = true) {
  const ul = document.createElement('ul')

  if (!isRoot) {
    ul.classList.add('hide')
  }

  data.forEach(e => {
    let isVisible = isRoot;
    const li = document.createElement('li')
    const text = document.createElement('span')
    const button = document.createElement('button')

    if (e.children) {
      button.textContent = '+'
      li.appendChild(button)
    }

    text.textContent = e.name
    li.appendChild(text)

    if (e.children) {
      const children = toHtml(e.children, false)
      li.appendChild(children)

      button.addEventListener('click', function() {
        if (isRoot) {
          isVisible = !isVisible
        }

        button.textContent = isVisible ? '+' : '-'
        children.classList.toggle('hide')

        if (!isRoot) {
          isVisible = !isVisible
        }
      })
    }

    ul.appendChild(li)

  })

  return ul;
}

const tree = toTree(data)
const html = toHtml(tree)

document.body.appendChild(html)

.hide {
   display: none;
}

button {
  margin-right: 10px;
}