从平面到树的Javascript数组答案

【问题标题】：Javascript array from flat to tree从平面到树的Javascript数组
【发布时间】：2020-03-05 05:19:55
【问题描述】：

所有，

我有来自一家公司的技术任务。当我开始时，只有任务对我来说很困难。扁平数组是：

[
      { id: '1', name: 'name 1', parentId: null },
      { id: '2', name: 'name 2', parentId: null },
      { id: '2_1', name: 'name 2_1', parentId: '2' },
      { id: '2_2', name: 'name 2_2', parentId: '2' },
      { id: '3', name: 'name 3', parentId: null },
      { id: '4', name: 'name 4', parentId: null },
      { id: '5', name: 'name 5', parentId: null },
      { id: '6', name: 'name 6', parentId: null },
      { id: '7', name: 'name 7', parentId: null },
      { id: '1_1', name: 'name 1_1', parentId: '1' },
      { id: '1_2', name: 'name 1_2', parentId: '1' },
      { id: '1_3', name: 'name 1_3', parentId: '1' },
      { id: '1_4', name: 'name 1_4', parentId: '1' },
      { id: '1_5', name: 'name 1_5', parentId: '1' },
      { id: '2_1_1', name: 'name 2_1_1', parentId: '2_1' },
      { id: '2_1_2', name: 'name 2_1_2', parentId: '2_1' },
      { id: '2_1_3', name: 'name 2_1_3', parentId: '2_1' },
      { id: '2_1_4', name: 'name 2_1_4', parentId: '2_1' },
      { id: '2_1_5', name: 'name 2_1_5', parentId: '2_1' },
].

我需要把它做成一棵树并将其包含在输入列表中，并有机会打开和关闭子列表。请帮忙

【问题讨论】：

能否将您的预期输出添加到问题中？

标签： javascript arrays tree flat

【解决方案1】：

在创建我的解决方案时，我假设您希望从您的数据中获得类似手风琴的结构，该结构可以根据他们是否有孩子来打开或关闭。这是处理链接添加的代码sn-p。

arr.forEach(a => {
  const div = document.createElement("div")
  if (a.parentId === null) {
    div.classList.add("parent")
    div.setAttribute("id", `id${a.id}`)
    div.innerText = a.name
    tree.appendChild(div)
  }
  else {
    const parent = document.getElementById(`id${a.parentId}`)
    if (!parent.classList.contains("parent")) {
      parent.classList.add("parent")
    }
    console.log(`${a.id} `, parent)
    let childContainer = null
    if (parent.childElementCount === 0) {
      childContainer =  document.createElement("div")
      childContainer.classList.add("childContainer")
      parent.appendChild(childContainer)
      childContainer.classList.add("hidden")
    }
    else {
      childContainer = document.querySelector(`#id${a.parentId} .childContainer`)
    }
    div.classList.add("child")
    div.setAttribute("id", `id${a.id}`)
    div.innerText = a.name
    childContainer.appendChild(div)
  }
})

完整解决方案：Codepen link

【讨论】：