How to create hierarchy object from array of objects?

Question

I want to create tree structure array from the following array of objects:

const arrData = [
    {
        "id": "3",
        "name": "Ctech A",
        "parentId": "0",
        "type": "Building"
    },
    {
        "id": "4",
        "name": "3rd floor",
        "parentId": "3",
        "type": "Floor"
    },
    {
        "id": "5",
        "name": "room_01",
        "parentId": "4",
        "type": "Room"
    },
    {
        "id": "6",
        "name": "room_video",
        "parentId": "4",
        "type": "Room"
    },
    {
        "id": "7",
        "name": "room_Lab",
        "parentId": "4",
        "type": "Room"
    },
    {
        "id": "8",
        "name": "room_engg",
        "parentId": "4",
        "type": "Room"
    },
    {
        "id": "9",
        "name": "Rack_1",
        "parentId": "5",
        "type": "Rack"
    },
    {
        "id": "10",
        "name": "Rack_2",
        "parentId": "5",
        "type": "Rack"
    },
    {
        "id": "11",
        "name": "Rack_3",
        "parentId": "5",
        "type": "Rack"
    },
    {
        "id": "12",
        "name": "Shelf_01",
        "parentId": "9",
        "type": "Shelf"
    },
    {
        "id": "13",
        "name": "Slot_1",
        "parentId": "12",
        "type": "Slot"
    },
    {
        "id": "14",
        "name": "Slot_2",
        "parentId": "12",
        "type": "Slot"
    },
    {
        "id": "15",
        "name": "Shelf_02",
        "parentId": "9",
        "type": "Shelf"
    }
]

And I want this data in hierarchical way like parent children i.e. nested object. I have tried it using reduce but it is giving me separate arrays like

{
    "Building": [
        "Ctech A"
    ],
    "Floor": [
        "3rd floor"
    ],
    "Room": [
        "room_01",
        "room_video",
        "room_Lab",
        "room_engg"
    ],
    "Rack": [
        "Rack_1",
        "Rack_2",
        "Rack_3"
    ],
    "Shelf": [
        "Shelf_01",
        "Shelf_02"
    ],
    "Slot": [
        "Slot_1",
        "Slot_2"
    ]
}

Following is my reduce functions:

const result = arrData.reduce((r, c) => {
                    r[c.type] = r[c.type] || []
                    r[c.type].push(c.name)
                    return r
                }, {})

I want desired output as:

[
    {
        "id": "3",
        "name": "Ctech A",
        "parentId": "0",
        "type": "Building",
        "childeren": [
            {
                "id": "4",
                "name": "3rd floor",
                "parentId": "3",
                "type": "Floor",
                "children": [
                    {
                        "id": "5",
                        "name": "room_01",
                        "parentId": "4",
                        "type": "Room",
                        "children": [
                            {
                                "id": "9",
                                "name": "Rack_1",
                                "parentId": "5",
                                "type": "Rack",
                                "children": [
                                    {
                                        "id": "12",
                                        "name": "Shelf_01",
                                        "parentId": "9",
                                        "type": "Shelf",
                                        "children": [
                                            {
                                                "id": "13",
                                                "name": "Slot_1",
                                                "parentId": "12",
                                                "type": "Slot"
                                            },
                                            {
                                                "id": "14",
                                                "name": "Slot_2",
                                                "parentId": "12",
                                                "type": "Slot"
                                            }                                                                           
                                        ]
                                    },
                                    {
                                        "id": "15",
                                        "name": "Shelf_02",
                                        "parentId": "9",
                                        "type": "Shelf"
                                    }                                   
                                ]
                            },
                            {
                                "id": "10",
                                "name": "Rack_2",
                                "parentId": "5",
                                "type": "Rack"
                            }
                        ]
                    },
                    {
                        "id": "6",
                        "name": "room_video",
                        "parentId": "4",
                        "type": "Room"
                    },
                    {
                        "id": "7",
                        "name": "room_Lab",
                        "parentId": "4",
                        "type": "Room"
                    },
                    {
                        "id": "8",
                        "name": "room_engg",
                        "parentId": "4",
                        "type": "Room"
                    }
                ]
            }
        ]
    }
]

Please guide me what am I doing wrong here?

@Cerbrus updated the post. Please check the desired output I want. — Trupti, Aug 28 '23 at 10:52

score -1 · Answer 1 · answered Aug 28 '23 at 10:36

You could just use reduce method with a recursive function and pass the parentId down.

const arrData = [{"id":"3","name":"Ctech A","parentId":"0","type":"Building"},{"id":"4","name":"3rd floor","parentId":"3","type":"Floor"},{"id":"5","name":"room_01","parentId":"4","type":"Room"},{"id":"6","name":"room_video","parentId":"4","type":"Room"},{"id":"7","name":"room_Lab","parentId":"4","type":"Room"},{"id":"8","name":"room_engg","parentId":"4","type":"Room"},{"id":"9","name":"Rack_1","parentId":"5","type":"Rack"},{"id":"10","name":"Rack_2","parentId":"5","type":"Rack"},{"id":"11","name":"Rack_3","parentId":"5","type":"Rack"},{"id":"12","name":"Shelf_01","parentId":"9","type":"Shelf"},{"id":"13","name":"Slot_1","parentId":"12","type":"Slot"},{"id":"14","name":"Slot_2","parentId":"12","type":"Slot"},{"id":"15","name":"Shelf_02","parentId":"9","type":"Shelf"}]

function toTree(data, parentId = 0) {
  return data.reduce((r, e) => {
    if (e.parentId == parentId) {
      const obj = { ...e }
      obj.children = [...toTree(data, e.id)]
      r.push(obj)
    }
    return r

  }, [])
}

const result = toTree(arrData)
console.log(result)

How to create hierarchy object from array of objects?

1 Answers1