分享一些關於聯調時處理數據結構的一些方法

在我們進行前後端聯調時，往往會出現後端給到的數據在前端不能直接做渲染的情況
這個時候就需要處理後端返回的數據，轉換數據結構前端再做渲染操作
當然如果和後端關係好~也可以讓後端改成你想要的樣子
以下簡單介紹遇到過的情況和相應的處理
覺得有用的話也可以自行封裝成工具類

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
}

歡迎大家評論，如有幫助可以關註+收藏，我會經常更新博客，大家一起討論學習