I am having an array of objects which is structured like below

const data = [ { depth:0, id:1, name:"data 1" }, { depth:0, id:2, name:"data 2" }, { depth:0, id:3, name:"data 3" }, { depth:1, id:11, name:"data 11", parentid:1, }, { depth:1, id:12, name:"data 12", parentid:1, }, { depth:1, id:21, name:"data 21", parentid:2, }, { depth:1, id:31, name:"data 31", parentid:3, }, { depth:2, id:111, name:"data 111", parentid:11, }, { depth:2, id:112, name:"data 112", parentid:11, }, { depth:2, id:113, name:"data 113", parentid:11, }, { depth:2, id:121, name:"data 121", parentid:12, }, { depth:2, id:122, name:"data 122", parentid:12, }, { depth:2, id:211, name:"data 211", parentid:21, }, { depth:3, id:2111, name:"data 2111", parentid:211, }, { depth:3, id:2112, name:"data 2112", parentid:211, }]

I want the output like below

const output= [
    {
        depth:0,
        id:1,
        name:"data 1",
        childs:[
            {
                depth:1,
                id:11,
                name:"data 11",
                parentid:1,
                childs:[
                    {
                        depth:2,
                        id:111,
                        name:"data 111",
                        parentid:11,
                    },
                    {
                        depth:2,
                        id:112,
                        name:"data 112",
                        parentid:11,
                    },
                    {
                        depth:2,
                        id:113,
                        name:"data 113",
                        parentid:11,
                    },
                ]
            },
            {
                depth:1,
                id:12,
                name:"data 12",
                parentid:1,
                childs:[
                    {
                        depth:2,
                        id:121,
                        name:"data 121",
                        parentid:12,
                    },
                    {
                        depth:2,
                        id:122,
                        name:"data 122",
                        parentid:12,
                    },
                ]
            },
        ]
    },
    {
        depth:0,
        id:2,
        name:"data 2",
        childs:[
            {
                depth:1,
                id:21,
                name:"data 21",
                parentid:2,
                childs:[
                    {
                        depth:2,
                        id:211,
                        name:"data 211",
                        parentid:21,
                        childs:[
                            {
                                depth:3,
                                id:2111,
                                name:"data 2111",
                                parentid:211,
                            },
                            {
                                depth:3,
                                id:2112,
                                name:"data 2112",
                                parentid:211,
                            },
                        ]
                    }
                ]
            }
        ]
    },
    {
        depth:0,
        id:3,
        name:"data 3",
        childs:[
            {
                depth:1,
                id:31,
                name:"data 31",
                parentid:3,
            },
        ]
    },
]

1. Key factor to achieve this output is depth,id,parentid
2. Each childs array of objects's parentid should be match their parent id. I had tried some map,filter,for loop methods but it's not working as I expected. How can i achieve this output in Javascript?

CodePudding user response：

you can do something like this

const createTree = data => {
  const initials = data.filter(d => !d.parentid)
  
  const loop = (item) => {
    const childs = data.filter(d => d.parentid === item.id)
    
    if(!childs.length){
      return item
    }
    
    return {
      ...item,
      childs: childs.map(loop)
    }
  }
  
  
  return initials.map(loop)
  
}




const data = [ { depth:0, id:1, name:"data 1" }, { depth:0, id:2, name:"data 2" }, { depth:0, id:3, name:"data 3" }, { depth:1, id:11, name:"data 11", parentid:1, }, { depth:1, id:12, name:"data 12", parentid:1, }, { depth:1, id:21, name:"data 21", parentid:2, }, { depth:1, id:31, name:"data 31", parentid:3, }, { depth:2, id:111, name:"data 111", parentid:11, }, { depth:2, id:112, name:"data 112", parentid:11, }, { depth:2, id:113, name:"data 113", parentid:11, }, { depth:2, id:121, name:"data 121", parentid:12, }, { depth:2, id:122, name:"data 122", parentid:12, }, { depth:2, id:211, name:"data 211", parentid:21, }, { depth:3, id:2111, name:"data 2111", parentid:211, }, { depth:3, id:2112, name:"data 2112", parentid:211, }]

const tree = createTree(data)

console.log(tree)