使用特定 object 的字段值组织 object 的数组

Question

我有一个 objects 的数组，其结构如下

常量数据 = [ { depth:0, id:1, 名称：“数据1” }, { depth:0, id:2, 名称：“数据2” }, { depth:0, id:3, 名称：“数据3” }, { depth:1, id:11, 名称：“数据11”， parentid:1, }, { depth:1, id:12, 名称：“数据12”， parentid:1, }, { depth:1, id:21, 名称：“数据21”， parentid:2, }, { depth:1, id:31, 名称：“数据31”， parentid:3, }, { depth:2, id:111, 名称：“数据111”， parentid:11, }, { depth:2, id:112, 名称：“数据112”， parentid:11, }, { depth:2, id:113, 名称：“数据113”， parentid:11, }, { depth:2, id:121, 名称：“数据121”， parentid:12, }, { depth:2, id:122, 名称：“数据122”， parentid:12, }, { depth:2, id:211, 名称：“数据211”， parentid:21, }, { depth:3, id:2111, 名称：“数据2111”， parentid:211, }, { depth:3, id:2112, 名称：“数据2112”， parentid:211, }]

我想要如下输出

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

实现此输出的关键因素是 depth,id,parentid
objects 的 parentid 的每个子数组应该与其 parent id 相匹配。我已经尝试了一些 map、filter、for 循环方法，但它没有像我预期的那样工作。我如何在 Javascript 中实现此输出？

Answer 1

你可以这样做

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)

使用特定 object 的字段值组织 object 的数组

Organizing array of objects using specific object's field value

javascript

arrays

sorting

reactjs