element Tree 如何把树形结构转换成数组。

发布于 2022-09-13 01:11:32 字数 4911 浏览 12 评论 0

需求：点击节点，把树形接口转换成数字展示出来，最终要把点击的数组转换成树形结构传给后端。
最终想要得到的数据1：右边展示数组：
shouList:
[{pArea:"李沧区",school:"青岛十六中路中路第三小学",class:"4.1",num:1},
{pArea:"李沧区",school:"青岛十六中路中路第三小学",class:"4.2",num:1},
{pArea:"城阳区",school:"锦绣小学",class:"1",num:1},
pArea:"城阳区",school:"锦绣小学",class:"2",num:2},
pArea:"城阳区",school:"锦绣小学",class:"3",num:2}]
最终想要得到的数据1转换成tree树形结构传给后端：
"children": [
"label": "李沧区",
"children": [{ "label": "青岛十六中路中路第三小学", "children":[{label:"4.1",num:1},{label:"44.2",num:1}]}]
]

数据： "children": [

    {
      "label": "城阳区",
      "children": [
        {
          "label": "锦绣小学",
          "children": [
            {
              "label": "1",
              "num": 1
            },
            {
              "label": "1、2",
              "num": 1
            },
            {
              "label": "2",
              "num": 2
            },
            {
              "label": "3",
              "num": 4
            },
            {
              "label": "3、4",
              "num": 2
            },
            {
              "label": "4",
              "num": 1
            },
            {
              "label": "4、5",
              "num": 1
            },
            {
              "label": "5",
              "num": 5
            }
          ]
        },
        {
          "label": "城阳区夏庄街道夏庄小学",
          "children": [
            {
              "label": "无",
              "num": 13
            }
          ]
        },

        {
          "label": "夏庄街道营村小学",
          "children": [
            {
              "label": "1",
              "num": 1
            },
            {
              "label": "1-2",
              "num": 3
            },
            {
              "label": "2",
              "num": 2
            }
          ]
        },

        {
          "label": "程哥庄小学",
          "children": [
            {
              "label": "1",
              "num": 5
            },
            {
              "label": "2",
              "num": 4
            }
          ]
        },
        {
          "label": "夏庄街道曹村小学",
          "children": [
            {
              "label": "1",
              "num": 2
            },
            {
              "label": "1-2",
              "num": 6
            }
          ]
        },
        {
          "label": "青岛市城阳区惜福镇街道牟家小学",
          "children": [
            {
              "label": "无",
              "num": 7
            }
          ]
        },
        {
          "label": "夏庄街道黄埠小学",
          "children": [
            {
              "label": "1",
              "num": 1
            },
            {
              "label": "1-4",
              "num": 8
            },
            {
              "label": "2",
              "num": 1
            },
            {
              "label": "3",
              "num": 1
            }
          ]
        },
        {
          "label": "青岛出口加工区实验小学",
          "children": [
            {
              "label": "1",
              "num": 1
            },
            {
              "label": "3",
              "num": 2
            },
            {
              "label": "4.1/4.2",
              "num": 1
            },
            {
              "label": "4.1/4.2/4.3",
              "num": 5
            }
          ]
        },
        {
          "label": "中华埠小学",
          "children": [
            {
              "label": "1",
              "num": 4
            },
            {
              "label": "1、2、3",
              "num": 2
            },
            {
              "label": "2",
              "num": 3
            },
            {
              "label": "2、3",
              "num": 2
            },
            {
              "label": "3",
              "num": 3
            }
          ]
        },
        {
          "label": "夏庄街道华阴小学",
          "children": [
            {
              "label": "1-2",
              "num": 7
            }
          ]
        },
        {
          "label": "环城路小学",
          "children": [
            {
              "label": "1",
              "num": 2
            },
            {
              "label": "1，2",
              "num": 1
            },
            {
              "label": "1，2,3,4",
              "num": 1
            },
            {
              "label": "1，2，3，4",
              "num": 1
            },
            {
              "label": "2",
              "num": 2
            },
            {
              "label": "2，3,4",
              "num": 1
            },
            {
              "label": "3",
              "num": 1
            },
            {
              "label": "3，4",
              "num": 1
            },
            {
              "label": "4",
              "num": 2
            }
          ]
        },
      ]
    },
  ]

分享到QQ

分享到微博

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

发布评论

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

疯了 2022-09-20 01:11:32

树形转换成数组
数据

let data = [

    {
      "label": "城阳区",
      "children": [
        {
          "label": "锦绣小学",
          "children": [
            {
              "label": "1",
              "num": 1
            },
            {
              "label": "1、2",
              "num": 1
            },
            {
              "label": "2",
              "num": 2
            },
            {
              "label": "3",
              "num": 4
            },
            {
              "label": "3、4",
              "num": 2
            },
            {
              "label": "4",
              "num": 1
            },
            {
              "label": "4、5",
              "num": 1
            },
            {
              "label": "5",
              "num": 5
            }
          ]
        },
        {
          "label": "城阳区夏庄街道夏庄小学",
          "children": [
            {
              "label": "无",
              "num": 13
            }
          ]
        },

        {
          "label": "夏庄街道营村小学",
          "children": [
            {
              "label": "1",
              "num": 1
            },
            {
              "label": "1-2",
              "num": 3
            },
            {
              "label": "2",
              "num": 2
            }
          ]
        },

        {
          "label": "程哥庄小学",
          "children": [
            {
              "label": "1",
              "num": 5
            },
            {
              "label": "2",
              "num": 4
            }
          ]
        },
        {
          "label": "夏庄街道曹村小学",
          "children": [
            {
              "label": "1",
              "num": 2
            },
            {
              "label": "1-2",
              "num": 6
            }
          ]
        },
        {
          "label": "青岛市城阳区惜福镇街道牟家小学",
          "children": [
            {
              "label": "无",
              "num": 7
            }
          ]
        },
        {
          "label": "夏庄街道黄埠小学",
          "children": [
            {
              "label": "1",
              "num": 1
            },
            {
              "label": "1-4",
              "num": 8
            },
            {
              "label": "2",
              "num": 1
            },
            {
              "label": "3",
              "num": 1
            }
          ]
        },
        {
          "label": "青岛出口加工区实验小学",
          "children": [
            {
              "label": "1",
              "num": 1
            },
            {
              "label": "3",
              "num": 2
            },
            {
              "label": "4.1/4.2",
              "num": 1
            },
            {
              "label": "4.1/4.2/4.3",
              "num": 5
            }
          ]
        },
        {
          "label": "中华埠小学",
          "children": [
            {
              "label": "1",
              "num": 4
            },
            {
              "label": "1、2、3",
              "num": 2
            },
            {
              "label": "2",
              "num": 3
            },
            {
              "label": "2、3",
              "num": 2
            },
            {
              "label": "3",
              "num": 3
            }
          ]
        },
        {
          "label": "夏庄街道华阴小学",
          "children": [
            {
              "label": "1-2",
              "num": 7
            }
          ]
        },
        {
          "label": "环城路小学",
          "children": [
            {
              "label": "1",
              "num": 2
            },
            {
              "label": "1，2",
              "num": 1
            },
            {
              "label": "1，2,3,4",
              "num": 1
            },
            {
              "label": "1，2，3，4",
              "num": 1
            },
            {
              "label": "2",
              "num": 2
            },
            {
              "label": "2，3,4",
              "num": 1
            },
            {
              "label": "3",
              "num": 1
            },
            {
              "label": "3，4",
              "num": 1
            },
            {
              "label": "4",
              "num": 2
            }
          ]
        },
      ]
    },
  ];

const treeToArr = (data=[])=>{
let res=[];
data.forEach(pArea=>{
  pArea.children.forEach(school=>{
    school.children.forEach(({label,num})=>{
        res.push({pArea:pArea.label,school:school.label,class:label,num:num});
      })
  })
});

return res;
};

treeToArr(data);

0: {pArea: "城阳区", school: "锦绣小学", class: "1", num: 1}
1: {pArea: "城阳区", school: "锦绣小学", class: "1、2", num: 1}
2: {pArea: "城阳区", school: "锦绣小学", class: "2", num: 2}
3: {pArea: "城阳区", school: "锦绣小学", class: "3", num: 4}
4: {pArea: "城阳区", school: "锦绣小学", class: "3、4", num: 2}
5: {pArea: "城阳区", school: "锦绣小学", class: "4", num: 1}
6: {pArea: "城阳区", school: "锦绣小学", class: "4、5", num: 1}
7: {pArea: "城阳区", school: "锦绣小学", class: "5", num: 5}
8: {pArea: "城阳区", school: "城阳区夏庄街道夏庄小学", class: "无", num: 13}
9: {pArea: "城阳区", school: "夏庄街道营村小学", class: "1", num: 1}
10: {pArea: "城阳区", school: "夏庄街道营村小学", class: "1-2", num: 3}
11: {pArea: "城阳区", school: "夏庄街道营村小学", class: "2", num: 2}
12: {pArea: "城阳区", school: "程哥庄小学", class: "1", num: 5}
13: {pArea: "城阳区", school: "程哥庄小学", class: "2", num: 4}
14: {pArea: "城阳区", school: "夏庄街道曹村小学", class: "1", num: 2}
15: {pArea: "城阳区", school: "夏庄街道曹村小学", class: "1-2", num: 6}
16: {pArea: "城阳区", school: "青岛市城阳区惜福镇街道牟家小学", class: "无", num: 7}
17: {pArea: "城阳区", school: "夏庄街道黄埠小学", class: "1", num: 1}
18: {pArea: "城阳区", school: "夏庄街道黄埠小学", class: "1-4", num: 8}
19: {pArea: "城阳区", school: "夏庄街道黄埠小学", class: "2", num: 1}
20: {pArea: "城阳区", school: "夏庄街道黄埠小学", class: "3", num: 1}
21: {pArea: "城阳区", school: "青岛出口加工区实验小学", class: "1", num: 1}
22: {pArea: "城阳区", school: "青岛出口加工区实验小学", class: "3", num: 2}
23: {pArea: "城阳区", school: "青岛出口加工区实验小学", class: "4.1/4.2", num: 1}
24: {pArea: "城阳区", school: "青岛出口加工区实验小学", class: "4.1/4.2/4.3", num: 5}
25: {pArea: "城阳区", school: "中华埠小学", class: "1", num: 4}
26: {pArea: "城阳区", school: "中华埠小学", class: "1、2、3", num: 2}
27: {pArea: "城阳区", school: "中华埠小学", class: "2", num: 3}
28: {pArea: "城阳区", school: "中华埠小学", class: "2、3", num: 2}
29: {pArea: "城阳区", school: "中华埠小学", class: "3", num: 3}
30: {pArea: "城阳区", school: "夏庄街道华阴小学", class: "1-2", num: 7}
31: {pArea: "城阳区", school: "环城路小学", class: "1", num: 2}
32: {pArea: "城阳区", school: "环城路小学", class: "1，2", num: 1}
33: {pArea: "城阳区", school: "环城路小学", class: "1，2,3,4", num: 1}
34: {pArea: "城阳区", school: "环城路小学", class: "1，2，3，4", num: 1}
35: {pArea: "城阳区", school: "环城路小学", class: "2", num: 2}
36: {pArea: "城阳区", school: "环城路小学", class: "2，3,4", num: 1}
37: {pArea: "城阳区", school: "环城路小学", class: "3", num: 1}
38: {pArea: "城阳区", school: "环城路小学", class: "3，4", num: 1}
39: {pArea: "城阳区", school: "环城路小学", class: "4", num: 2}

数组转换成树形
数据

var arr = [{"pArea":"城阳区","school":"锦绣小学","class":"1","num":1},{"pArea":"城阳区","school":"锦绣小学","class":"1、2","num":1},{"pArea":"城阳区","school":"锦绣小学","class":"2","num":2},{"pArea":"城阳区","school":"锦绣小学","class":"3","num":4},{"pArea":"城阳区","school":"锦绣小学","class":"3、4","num":2},{"pArea":"城阳区","school":"锦绣小学","class":"4","num":1},{"pArea":"城阳区","school":"锦绣小学","class":"4、5","num":1},{"pArea":"城阳区","school":"锦绣小学","class":"5","num":5},{"pArea":"城阳区","school":"城阳区夏庄街道夏庄小学","class":"无","num":13},{"pArea":"城阳区","school":"夏庄街道营村小学","class":"1","num":1},{"pArea":"城阳区","school":"夏庄街道营村小学","class":"1-2","num":3},{"pArea":"城阳区","school":"夏庄街道营村小学","class":"2","num":2},{"pArea":"城阳区","school":"程哥庄小学","class":"1","num":5},{"pArea":"城阳区","school":"程哥庄小学","class":"2","num":4},{"pArea":"城阳区","school":"夏庄街道曹村小学","class":"1","num":2},{"pArea":"城阳区","school":"夏庄街道曹村小学","class":"1-2","num":6},{"pArea":"城阳区","school":"青岛市城阳区惜福镇街道牟家小学","class":"无","num":7},{"pArea":"城阳区","school":"夏庄街道黄埠小学","class":"1","num":1},{"pArea":"城阳区","school":"夏庄街道黄埠小学","class":"1-4","num":8},{"pArea":"城阳区","school":"夏庄街道黄埠小学","class":"2","num":1},{"pArea":"城阳区","school":"夏庄街道黄埠小学","class":"3","num":1},{"pArea":"城阳区","school":"青岛出口加工区实验小学","class":"1","num":1},{"pArea":"城阳区","school":"青岛出口加工区实验小学","class":"3","num":2},{"pArea":"城阳区","school":"青岛出口加工区实验小学","class":"4.1/4.2","num":1},{"pArea":"城阳区","school":"青岛出口加工区实验小学","class":"4.1/4.2/4.3","num":5},{"pArea":"城阳区","school":"中华埠小学","class":"1","num":4},{"pArea":"城阳区","school":"中华埠小学","class":"1、2、3","num":2},{"pArea":"城阳区","school":"中华埠小学","class":"2","num":3},{"pArea":"城阳区","school":"中华埠小学","class":"2、3","num":2},{"pArea":"城阳区","school":"中华埠小学","class":"3","num":3},{"pArea":"城阳区","school":"夏庄街道华阴小学","class":"1-2","num":7},{"pArea":"城阳区","school":"环城路小学","class":"1","num":2},{"pArea":"城阳区","school":"环城路小学","class":"1，2","num":1},{"pArea":"城阳区","school":"环城路小学","class":"1，2,3,4","num":1},{"pArea":"城阳区","school":"环城路小学","class":"1，2，3，4","num":1},{"pArea":"城阳区","school":"环城路小学","class":"2","num":2},{"pArea":"城阳区","school":"环城路小学","class":"2，3,4","num":1},{"pArea":"城阳区","school":"环城路小学","class":"3","num":1},{"pArea":"城阳区","school":"环城路小学","class":"3，4","num":1},{"pArea":"城阳区","school":"环城路小学","class":"4","num":2}];

const arrToTree =(data=[]) =>{
    let tree = [];
    data.forEach(item=>{
       let pArea = tree.find(node=>item.pArea == node.label);
       if(!pArea) {
         pArea = {"label": item.pArea,"children": []};
         tree.push(pArea);
       }
       let school =pArea.children.find(node=>item.school == node.label);
       if(!school) {
         school = {"label": item.school,"children": []};
         pArea.children.push(school);
       }
       if(!school.children.find(node=>item.class == node.label)) {
         school.children.push({"label": item.class,"num": item.num});
       }
    });
    return tree;
};
console.log(arrToTree(arr))