Javascript 数组从平面到树

Question

all,

I have a technical task from one company. As I am starting only the task is quiet a difficult for me. Tha flat array is:

[
      { 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' },
].

I need to make it as a tree and include it to input list and to have opportunity to open and close children lists. Please help

Answer 1

While creating my solution, I assumed you wanted a accordion-like structure from your data which can be opened or closed based on whether they have children or not. Here is a code snippet for handling link addition.

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)
  }
})

Full solution: Codepen link