分享一些关于联调时处理数据结构的一些方法

在我们进行前后端联调时，往往会出现后端给到的数据在前端不能直接做渲染的情况
这个时候就需要处理后端返回的数据，转换数据结构前端再做渲染操作
当然如果和后端关系好~也可以让后端改成你想要的样子
以下简单介绍遇到过的情况和相应的处理
觉得有用的话也可以自行封装成工具类

后端返回线性结构数据，需根据roleId进行数据分类

const arr = [{
    roleId: "r-01",
    roleName: "系统管理员",
    teamId: "fdasfasfasdfas",
    userId: "u-01-01",
    userName: "员工r-01-1"
  },
  {
    roleId: "r-01",
    roleName: "超级管理员1",
    teamId: "xxxxxxxxx",
    userId: "u-01-02",
    userName: "员工r-01-2"
  },
  {
    roleId: "r-02",
    roleName: "系统管理员",
    teamId: "fdasfasfasdfas",
    userId: "u-02-01",
    userName: "员工r-02-1"
  },
]

const convert = (arr) => {
  const map = {}
  arr.forEach(item => {
    const roleId = item.roleId
    if (!map[roleId]) {
      map[roleId] = {
        roleId: roleId,
        roleName: item.roleName,
        userList: [{
          userId: item.userId,
          userName: item.userName
        }]
      }
    } else {
      map[roleId].userList.push({
        userId: item.userId,
        userName: item.userName
      })
    }
  });
  return Object.values(map)
}
const result = convert(arr)
console.log(result)

线性结构转树形结构，在使用el-tree或el-cascader经常会使用到，在使用el-table动态列表头嵌套也会使用到

const arr = [
  {
    VC_BT: '期间数据和指标',
    VC_FJXX: 'VC_COLNAME'
  },
  {
    VC_BT: '2016'
  },
  {
    VC_BT: 'A',
    VC_FJXX: 'VC_FJA',
    VC_FUJ: '2016'
  },
  {
    VC_BT: 'B',
    VC_FJXX: 'VC_FJB',
    VC_FUJ: '2016'
  },
  {
    VC_BT: '2015'
  },
  {
    VC_BT: 'A',
    VC_FJXX: 'VC_FJA_PR1',
    VC_FUJ: '2015'
  },
  {
    VC_BT: 'B',
    VC_FJXX: 'VC_FJB_PR1',
    VC_FUJ: '2015'
  },
  {
    VC_BT: '2014'
  },
  {
    VC_BT: 'A',
    VC_FJXX: 'VC_FJA_PR2',
    VC_FUJ: '2014'
  },
  {
    VC_BT: 'B',
    VC_FJXX: 'VC_FJB_PR2',
    VC_FUJ: '2014'
  }
]

const listToTree = (list, option) => {
  const _defaultOptioin = {
    key: 'id',
    parentKey: 'pid'
  }
  const { key, parentKey } = Object.assign(
    _defaultOptioin,
    option
  )
  const result = []
  const itemMap = {}
  for (const item of list) {
    const id = item[key]
    const pid = item[parentKey]
    if (!itemMap[id]) {
      itemMap[id] = {
        children: []
      }
    }
    itemMap[id] = {
      ...item,
      children: itemMap[id].children
    }
    const treeItem = itemMap[id]
    if (!pid || pid === 0) {
      result.push(treeItem)
    } else {
      if (!itemMap[pid]) {
        itemMap[pid] = {
          children: []
        }
      }
      itemMap[pid].children.push(treeItem)
    }
  }
  return result
}