树形数据扁平化成数组

发布于 2022-09-12 13:37:35 字数 5085 浏览 26 评论 0

有下面的树形数据结构,如何把所有的选中项层级扁平化,即扁平化成下面的结构:

[
{"name": "类目10-层级2>类目100-层级3>类目1000-层级4"}
]

树形数据:

[{
      "checked": true,
      "childList": [{
          "id": 10,
          "level": 1,
          "name": "类目10-层级2",
          "pid": 1,
          "checked": true,
          "childList": [{
              "id": 100,
              "level": 3,
              "name": "类目100-层级3",
              "pid": 10,
              "checked": true,
              "childList": [{
                  "id": 1000,
                  "level": 4,
                  "name": "类目1000-层级4",
                  "pid": 100,
                  "checked": true,
                },
                {
                  "id": 1001,
                  "level": 4,
                  "name": "类目1001-层级4",
                  "pid": 100
                }
              ]
            },
            {
              "id": 101,
              "level": 3,
              "name": "类目101-层级3",
              "pid": 10,
              "childList": [{
                  "id": 1003,
                  "level": 4,
                  "name": "类目1003-层级4",
                  "pid": 101
                },
                {
                  "id": 1004,
                  "level": 4,
                  "name": "类目1004-层级4",
                  "pid": 101
                }
              ]
            }
          ]
        },
        {
          "id": 11,
          "level": 2,
          "name": "类目11-层级2",
          "pid": 1,
          "childList": [{
              "id": 200,
              "level": 3,
              "name": "类目200-层级3",
              "pid": 11,
              "childList": [{
                  "id": 2000,
                  "level": 4,
                  "name": "类目2000-层级4",
                  "pid": 200
                },
                {
                  "id": 2001,
                  "level": 4,
                  "name": "类目2001-层级4",
                  "pid": 200
                }
              ]
            },
            {
              "id": 201,
              "level": 3,
              "name": "类目201-层级3",
              "pid": 11,
              "childList": [{
                  "id": 2002,
                  "level": 4,
                  "name": "类目2002-层级4",
                  "pid": 201
                },
                {
                  "id": 2003,
                  "level": 4,
                  "name": "类目2003-层级4",
                  "pid": 201
                }
              ]
            }
          ]
        }
      ],
      "id": 1,
      "level": 1,
      "name": "类目1-层级1",
      "pid": ""
    },
    {
      "checked": false,
      "childList": [{
          "id": 50,
          "level": 1,
          "name": "类目50-层级2",
          "pid": 2,
          "childList": [{
              "id": 501,
              "level": 3,
              "name": "类目501-层级3",
              "pid": 50,
              "childList": [{
                  "id": 5001,
                  "level": 4,
                  "name": "类目5001-层级4",
                  "pid": 501
                },
                {
                  "id": 5002,
                  "level": 4,
                  "name": "类目5002-层级4",
                  "pid": 501
                }
              ]
            },
            {
              "id": 502,
              "level": 3,
              "name": "类目502-层级3",
              "pid": 50,
              "childList": [{
                  "id": 5003,
                  "level": 4,
                  "name": "类目5003-层级4",
                  "pid": 502
                },
                {
                  "id": 5004,
                  "level": 4,
                  "name": "类目5004-层级4",
                  "pid": 502
                }
              ]
            }
          ]
        },
        {
          "id": 60,
          "level": 2,
          "name": "类目60-层级2",
          "pid": 2,
          "childList": [{
              "id": 600,
              "level": 3,
              "name": "类目600-层级3",
              "pid": 60,
              "childList": [{
                  "id": 6000,
                  "level": 4,
                  "name": "类目6000-层级4",
                  "pid": 200
                },
                {
                  "id": 6001,
                  "level": 4,
                  "name": "类目6001-层级4",
                  "pid": 200
                }
              ]
            },
            {
              "id": 601,
              "level": 3,
              "name": "类目601-层级3",
              "pid": 13,
              "childList": [{
                  "id": 6002,
                  "level": 4,
                  "name": "类目6002-层级4",
                  "pid": 601
                },
                {
                  "id": 6003,
                  "level": 4,
                  "name": "类目6003-层级4",
                  "pid": 601
                }
              ]
            }
          ]
        }
      ],
      "id": 2,
      "level": 1,
      "name": "类目2-层级1",
      "pid": ""
    }
  ],

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

不必了 2022-09-19 13:37:35
function flat(list) {
  function dfs(node, res=[], names=[]) {
    if(!node || !node.checked) return res;
    names.push(node.name);
    if(node.childList && node.childList.length) {
      node.childList.forEach(child => dfs(child,res,names))
    } else {
      res.push({name: names.join('>')});
    }
    names.pop();
    return res;
  }
  return list.reduce((res, item) => dfs(item, res), []);
}

这样?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文