การแปลง Flat Array of Objects เป็น Tree Structure ใน JavaScript

สมมติเรามีอาร์เรย์ของออบเจกต์แบบนี้:

const arr = [
  { 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 ที่รับอาร์เรย์แบบนี้เข้ามา ฟังก์ชันควรสร้าง tree data structure จากอาร์เรย์นี้ โดยเชื่อมลูกกับ parent object และแสดงผลบนหน้าจอในรูปแบบ nested list

ตัวอย่างโค้ด

HTML Code -

<html>
  <head></head>
  <body>
    <div id = "tree">
    </div>
  </body>
</html>

JavaScript Code -

const arr = [
  { 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' },
]
const tree = document.getElementById("tree")
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)
  }
})
const parents = Array.from(document.getElementsByClassName("parent")).filter(p => p.childElementCount !== 0)
parents.forEach(p => {
  p.addEventListener("click", function(e) {
    e.preventDefault()
    const container = this.getElementsByClassName("childContainer")[0]
    container.classList.toggle("visible")
    e.stopPropagation()
  })
})

CSS Code -

.parent, .child {
  cursor: pointer;
}
.parent {
  margin: 10px 0;
  font-size: 1.3rem;
}
.parent::before {
  content: "\25BA";
  margin-right: 10px;
}
.childContainer {
  margin-left: 20px;
  display: none;
}
.childContainer.visible {
  display: block;
}
.child {
  font-size: 1rem;
}
.child::before {
  content: "\25BA";
}

ผลลัพธ์บนหน้าจอจะเป็นดังนี้: