Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.0k views
in Technique[技术] by (71.8m points)

树形数据扁平化成数组

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

[
{"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": ""
    }
  ],

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
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), []);
}

这样?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

57.0k users

...