Chuyển mảng đối tượng phẳng thành cấu trúc cây trong JavaScript

Cho mảng đối tượng có id, name, parentId:

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

Viết hàm xây dựng cây (tree) liên kết con đến cha, hiển thị dạng nested list trên giao diện.

Ví dụ

HTML

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

JavaScript

const arr = [ ... ]; 
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"); 
    let childContainer = null; 
    if (parent.childElementCount === 0) { 
      childContainer = document.createElement("div"); 
      childContainer.classList.add("childContainer", "hidden"); 
      parent.appendChild(childContainer); 
    } 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 hiển thị cây có thể thu gọn/mở rộng.

Kết quả: giao diện cây thư mục tương tác.