美文网首页
JavaScript最简洁根据parentId将数据递归成树状

JavaScript最简洁根据parentId将数据递归成树状

作者: 宇cccc | 来源:发表于2021-06-21 11:58 被阅读0次

    假设数据如下

    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(JSON.stringify(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: [],
                },
              ],
            },
          ];
    

    相关文章

      网友评论

          本文标题:JavaScript最简洁根据parentId将数据递归成树状

          本文链接:https://www.haomeiwen.com/subject/eurwqktx.html