微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

从平面对象阵列创建嵌套的对象阵列最多5个级别

如何解决从平面对象阵列创建嵌套的对象阵列最多5个级别

我需要从平面对象数组(最多5个级别)创建对象的嵌套数组。原始JSON如下所示:

[{
  "code": "01","name": "Some name 1","level": "1"
},{
  "code": "01.1","name": "Some name 2","level": "2"
},{
  "code": "01.11","name": "Some name 3","level": "3"
},{
  "code": "01.11.1","name": "Some name 4","level": "4"
},{
  "code": "01.11.11","name": "Some name 5","level": "5"
},{
  "code": "01.11.12","name": "Some name 6","level": "5"
}]

新数组将在Ant Design Tree组件中使用,因此它应具有以下结构:

[
  {
    key: '01',title: 'Some name 1',children: [
      key: '01.1'
      title: 'Some name 2',children: [
        {
          key: '01.11'
          title: 'Some name 3',children: [
            {
              key: '01.11.1'
              title: 'Some name 4',children: [
                {
                  key: '01.11.11'
                  title: 'Some name 5'
                },{
                  key: '01.11.12'
                  title: 'Some name 6'
                }
              ]
            }
          ]
        }
      ]
    ]
  }
]

我已经创建了一个用于嵌套数组的函数,但是组件变得非常慢。我猜有更好的方法可以做到这一点。这是我的代码

const __getCodes = () => {
  let array = codeData;
  let result = [];
  for(let i = 0; i < array.length; i++) {
    let obj = array[i];
    if (obj.level === "1") {
      result.push({key: obj.code,title: obj.code + ' ' + obj.name,checkable: false});
    }
    if (obj.level === "2") {
      const currentGroup = result.find(group => group.key === obj.code.substring(0,2))
      if (!currentGroup.children) {
        currentGroup.children = []
      }
      currentGroup.children.push({key: obj.code,checkable: false})
    }
    if (obj.level === "3") {
      const parentGroup = result.find(group => group.key === obj.code.substring(0,2))
      const currentGroup = parentGroup.children.find(group => group.key === obj.code.substring(0,4))
      if (!currentGroup.children) {
        currentGroup.children = []
      }
      currentGroup.children.push({key: obj.code,title: obj.code + ' ' + obj.name})
    }
    if (obj.level === "4") {
      const subParentGroup = result.find(group => group.key === obj.code.substring(0,2))
      const parentGroup = subParentGroup.children.find(group => group.key === obj.code.substring(0,4))
      const currentGroup = parentGroup.children.find(group => group.key === obj.code.substring(0,5))
      if (!currentGroup.children) {
        currentGroup.children = []
      }
      currentGroup.children.push({key: obj.code,title: obj.code + ' ' + obj.name})
    }
    if (obj.level === "5") {
      const subSubParentGroup = result.find(group => group.key === obj.code.substring(0,2))
      const subParentGroup = subSubParentGroup.children.find(group => group.key === obj.code.substring(0,4))
      const parentGroup = subParentGroup.children.find(group => group.key === obj.code.substring(0,5))
      const currentGroup = parentGroup.children.find(group => group.key === obj.code.substring(0,7))
      if (!currentGroup.children) {
        currentGroup.children = []
      }
      currentGroup.children.push({key: obj.code,title: obj.code + ' ' + obj.name})
    }
  }
  return result;
}

const treeData = __getCodes();

如何优化此功能以获得所需的结果?

解决方法

您可以创建一个解决方案,该解决方案将使用level属性将当前对象推入嵌套结构中的某个级别,并将其与引用和reduce方法结合起来。

const data = [{"code":"01","name":"Some name 1","level":"1"},{"code":"01.1","name":"Some name 2","level":"2"},{"code":"01.11","name":"Some name 3","level":"3"},{"code":"01.11.1","name":"Some name 4","level":"4"},{"code":"01.11.11","name":"Some name 5","level":"5"},{"code":"01.11.12","name":"Some name 6","level":"5"}]

const result = data.reduce((r,{ level,...rest }) => {
  const value = { ...rest,children: [] }
  r[level] = value.children;
  r[level - 1].push(value)
  return r;
},[[]]).shift()

console.log(result)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。