ধরুন, আমাদের কাছে এই ধরনের বস্তুর একটি অ্যারে আছে −
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()
})
}) সিএসএস কোড −
.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";
} এবং স্ক্রিনে আউটপুট হবে −
