JS-把一个扁平化数据转换成树形结构(tree)

需求:把一个扁平化数组转换成树形结构数据(tree)

JSON①:

const flatArr = [
        { id: '01', parentId: 0, name: '节点1' },
        { id: '011', parentId: '01', name: '节点1-1' },
        { id: '0111', parentId: '011', name: '节点1-1-1' },
        { id: '02', parentId: 0, name: '节点2' },
        { id: '022', parentId: '02', name: '节点2-2' },
        { id: '023', parentId: '02', name: '节点2-3' },
        { id: '0222', parentId: '022', name: '节点2-2-2' },
        { id: '03', parentId: 0, name: '节点3' },
      ]

JSON②:

[
        {
          id: '01',
          name: '节点1',
          parentId: 0,
          children: [
            {
              id: '011',
              name: '节点1-1',
              parentId: '01',
              children: [
                {
                  id: '0111',
                  name: '节点1-1-1',
                  parentId: '011',
                  children: [
                      ...
                  ],
                },
              ],
            },
          ],
        },
        {
          id: '02',
          name: '节点2',
          parentId: 0,
          children: [
              // 如上节点1
          ]
        },
        {
          id: '03',
          name: '节点3',
          parentId: 0,
          children: [
              // 如上节点1
          ]
        }
      ]

转换方法:

arrayToTree(list){
      const treeData = [];
      // forEach 遍历数组
      list.forEach(item => {
          // 根节点 直接push
          if(item.parentId === '0') {
              treeData.push(item);
          }
          // parentId等于id的属于它的子节点 放到children变量里
          const children = list.filter(data => data.parentId == item.id);
          // 到达叶子节点后 return
          if(!children.length) return;
          // 把children放到对于的父节点里
          item.children = children;
      })
      return treeData;
    }

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值