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 फ़ंक्शन लिखना है जो ऐसी ऑब्जेक्ट की सरणी लेता है। फ़ंक्शन को तब इस सरणी के आधार पर एक ट्री डेटा संरचना का निर्माण करना चाहिए जिसमें बच्चों को उनके पैरेंट ऑब्जेक्ट से जोड़ा जाए और परिणाम को नेस्टेड सूची प्रारूप में स्क्रीन पर प्रदर्शित करना चाहिए।

उदाहरण

इसके लिए कोड होगा -

HTML कोड -

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

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

और स्क्रीन पर आउटपुट होगा -