js对象数组转为三层树结构数据

组件树的结构

在使用树形结构时，一般后端返回的数据不会是组件要求的key,title,children，这时就会要求前端对数据进行处理。

//后端返回的数据
let data = [
  {
    classId: 'class0-1',
    className: 'className0-1',
    groupList: [
      {
        groupId: 'gr0-1-0',
        groupName: 'grName0-1-0',
        studentList: [
          {
            studentId: 'st0-1-0-0',
            studentName: 'stName0-1-0-0'
          },
          {
            studentId: 'st0-1-0-1',
            studentName: 'stName0-1-0-1'
          },
          {
            studentId: 'st0-1-0-2',
            studentName: 'stName0-1-0-2'
          }
        ]
      },
      {
        groupId: 'gr0-1-1',
        groupName: 'grName0-1-1',
        studentList: [
          {
            studentId: 'st0-1-1-0',
            studentName: 'stName0-1-1-0'
          },
          {
            studentId: 'st0-1-1-1',
            studentName: 'stName0-1-1-1'
          }
        ]
      }
    ]
  }
];

---

//前端对返回的数据进行处理，treeDataList即为树形结构的数据
let treeDataList = [];
data?.forEach(item => {
  let obj = {};
  obj.key = item.classId;
  obj.title = item.className;
  obj.children = [];
  item.groupList?.forEach(group => {
    let objOne = {};
    objOne.key = group.groupId;
    objOne.title = group.groupName;
    objOne.children = [];
    group.studentList?.forEach(maps => {
      let objTwo = {};
      objTwo.key = maps.studentId;
      objTwo.title = maps.studentName;
      objOne.children.push(objTwo);
    });
    obj.children.push(objOne);
  });
  treeDataList.push(obj);
});