根据id和parentId将数据组织成树状结构

直接上代码

// 默认数据,需要根据parentId和id将数据组织成树状结构
const data = [
    { id: 2, name: "研发部", parentId: 1 },
    { id: 4, name: "行政人事部", parentId: 1 },
    { id: 6, name: "行政人事部下面的行政", parentId: 4 },
    { id: 7, name: "行政人事部下面的人力资源", parentId: 4 },
    { id: 20, name: "研发下面的产品组", parentId: 2 },
    { id: 21, name: "研发下面的测试组", parentId: 2 },
    { id: 22, name: "研发下面的运维组", parentId: 2 },
    { id: 23, name: "研发下面的前端组", parentId: 2 },
    { id: 24, name: "研发下面的后台组", parentId: 2 },
    { id: 25, name: "研发下面的移动开发组", parentId: 2 },
    { id: 99, name: "移动组下面的组", parentId: 25 },
    { id: 98, name: "移动组下面的组", parentId: 25 },
  ];

function formatToTree(ary, pid) {
    return ary
      .filter((item) =>
        // 如果没有父id(第一次递归的时候)将所有父级查询出来
        // 这里认为 item.parentId === 1 就是最顶层 需要根据业务调整
        pid === undefined ? item.parentId === 1 : item.parentId === pid
      )
      .map((item) => {
        // 通过父节点ID查询所有子节点
        item.children = formatToTree(ary, item.id);
        return item;
      });
  }

console.log(formatToTree(data))

得到结果如下:

[
        {
          id: 2,
          name: "研发部",
          parentId: 1,
          children: [
            { id: 20, name: "研发下面的产品组", parentId: 2, children: [] },
            {
              id: 25,
              name: "研发下面的移动开发组",
              parentId: 2,
              children: [
                { id: 99, name: "移动组下面的组", parentId: 25, children: [] },
                { id: 98, name: "移动组下面的组", parentId: 25, children: [] },
              ],
            },
          ],
        },
        {
          id: 4,
          name: "行政人事部",
          parentId: 1,
          children: [
            { id: 6, name: "行政人事部下面的行政", parentId: 4, children: [] },
            {
              id: 7,
              name: "行政人事部下面的人力资源",
              parentId: 4,
              children: [],
            },
          ],
        },
      ];
 

更通用的:

data数据中,父id的字段名不一定为parentId,且不一定是从1开始,也有可能从零开始

/**
 * 根据id将数据组织成树状结构
 * @param ary 要组织的数据
 * @param pid 最顶层数据的id值
 * @param pidName 父id字段名
 * @returns {*}
 */
function formatToTree(ary, pid, pidName = 'parentId') {
  return ary
      .filter((item) => item[pidName] === pid)
      .map((item) => {
          // 通过父节点ID查询所有子节点
          item.children = formatToTree(ary, item.id);
        return item;
      });
}

// 用法
formatToTree(data, 1)
 

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值