জাভাস্ক্রিপ্টে ফ্ল্যাট অবজেক্ট অ্যারেকে ট্রি-তে রূপান্তর

মান লিয়ে, আমাদের একটি অবজেক্টের অ্যারে আছে -

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

আমাদের একটি জাভাস্ক্রিপ্ট ফাংশন লিখতে হবে যা এমন একটি অবজেক্টের অ্যারে গ্রহণ করবে। ফাংশনটি এই অ্যারে 베이সে একটি ট্রি ডেটা স্ট্রাকচার কনস্ট্রাক্ট করবে চাইল্ডকে পেরেন্ট অবজেক্টের সাথে লিংক করবে এবং রেজাল্ট স্ক্রিনে নেস্টেড লিস্ট ফরম্যাটে দেখাবে।

উদাহরণ

HTML কোড -

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

জাভাস্ক্রিপ্ট কোড -

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 কোড -

.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"; }

স্ক্রিনে আউটপুট হবে -