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

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

1. 后端返回线性结构数据，需根据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) 

2. 线性结构转树形结构，在使用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 } 

欢迎大家评论，如有帮助可以关注+收藏，我会经常更新博客，大家一起讨论学习