前端如何处理后端传入的复杂数据格式

在前后端联调过程中不难发现，有时候从后端获取到的数据格式并不是我们所想要的格式，这时候就需要我们自己动手去处理了。最近在开发项目过程中也是遇到了很多传入的数据格式和自己所想要展示的有所区别，这里就先记录一下吧，总结总结，以防后续开发过程中再需要。（后续遇到其他也会持续进行更新）

目录

1.对象转数组

2.两个数组整合为一个数组

3.base64数据转为文件

4.时间处理方式

---

1.对象转数组

需要的格式是数组，类似于以下

const pieData = ref([
  { value: 40, name: '提出申请' },
  { value: 38, name: '自动化汇总' },
  { value: 32, name: '上报省调' },
  { value: 30, name: '自动化审核' },
  { value: 28, name: '现场人员许可' },
  { value: 28, name: '现场竣工申请' }
])

对方传来的是对象中单个放了每个字符串

statusCount: {
  "reported": 0,
  "appli": 0,
  "confirm": 0,
  "automation": 0,
  "automationSummary": 0,
  "operationStaffTermination": 0,
  "operationStaffPermission": 0
}

转化方式：首先先做个映像，用于将所传的字段转为自己所需要的文字，然后使用Object.keys遍历。**Object.keys()**‌是一个JavaScript内置函数，用于返回一个给定对象的所有可枚举属性的名称组成的数组

//做映射
const mapping = ref({
  reportedToProvincialDispatch: '上报省调',
  applicationSubmitted: '提出申请',
  confirmedCompletionArchived: '现场竣工申请',
  automationReview: '自动化审核',
  automationSummary: '自动化汇总',
  operationStaffTermination: '现场人员终止',
  operationStaffPermission: '现场人员许可'
})
Object.keys(statusCount).forEach(key => {
  pieData.value.push({
    value: statusCount[key], // 使用后端数据的值
    name: mapping.value[key] // 使用映射对象中的名称
  })
})

2.两个数组整合为一个数组

这里是做表格，需要的数据格式为数组中包含每个对象，其中这个数组中的fileName只区分今日和昨日，再没其他的数据。

const tableList = ref([
  {
    fileName:'今日',
    stationName:'北京站',
    workContent:'工作内容1'
  },
  {
    fileName:'昨日',
    stationName:'上海站',
    workContent:'工作内容2'
  },
  {
    fileName:'今日',
    stationName:'广州站',
    workContent:'工作内容3'
  },
  {
    fileName:'今日',
    stationName:'深圳站',
    workContent:'工作内容4'
  }
])

传来的格式为，并且里面不包含fileName这个字段

workingOrders: {
  "yesterdayCompleted": [
    {
      "stationName": "string",
      "workContent": "string"
    }
  ],
  "todayStarted": [
    {
      "stationName": "string",
      "workContent": "string"
    }
  ]
}

具体转化方法，首先一个数组一个数组遍历，并把遍历后的值push到所需的数组中

//遍历昨日完工单
workingOrders.yesterdayCompleted.forEach(item => {
  tableList.value.push({
    fileName: '昨日',
    stationName: item.stationName,
    workContent: item.workContent
  })
})
//遍历今日完工单
workingOrders.todayStarted.forEach(item => {
  tableList.value.push({
    fileName: '今日',
    stationName: item.stationName,
    workContent: item.workContent
  })
})

3.base64数据转为文件

在做获取录音文件的内容时，对方给的数据中文件数据为base64类型，但是前端这边其实这种是无法进行获取并播放的，还需要转为成可播放的文件才可，以下是想要得到的格式类型

const recordingList=ref([
  {
    id:1,
    name:'录音1',
    url:'http://localhost:3000/static/audio/1.mp3',
    duration:'00:01:00',
    file:File
  },
  {
    id:2,
    name:'录音2',
    url:'http://localhost:3000/static/audio/2.mp3',
    duration:'00:02:00',
    file:File
  }
])

对方传来的数据样式

data: [
  {
    "id": "文件ID",
    "mp3FileData": "base64编码的音频文件数据",
    "fileName": "文件名",
    "createTime": "文件创建时间",
    "duration": "录音时长"
  }
]

转化方式

const list = data.map(item => {
  //处理录音文件
  const base64Data = item.mp3FileData // 去掉前缀
  const binaryString = atob(base64Data) // 解码 Base64
  const byteArray = new Uint8Array(binaryString.length) // 创建一个新的 Uint8Array 对象
  // 将 base64 解码为 Uint8Array
  for (let i = 0; i < binaryString.length; i++) {
    byteArray[i] = binaryString.charCodeAt(i)
  }
  // 将 Uint8Array 转换为 Blob
  const blob = new Blob([byteArray], { type: 'audio/ogg; codecs=opus' })
  // 将 Blob 转换为 File-->可以直接上传到服务器
  const file = new File([blob], 'audio.ogg', { type: blob.type })
  // 将 Blob 转换为 URL-->可以直接播放
  const url = URL.createObjectURL(blob)
  return {
    id: item.id,
    name: item.fileName,
    url: url,
    time: item.duration,
    file: file
  }
})
// 将处理后的列表数据绑定到定义数组上
recordingList.value = list

4.时间处理方式

有时候可能后端传给我们的时间格式并不是我们想要的，所以在前端这里还需要做个中间处理，例如传给我的时间数据为99秒，亦或者是01:30这种，而我们想要的格式是多少小时多少分或者多少秒，首先对于第一种数据进行处理方式如下：

// 将秒转换为小时、分钟和秒的字符串
const formatTime = seconds => {
  // 秒数转化为小时、分钟、秒
  const hours = Math.floor(seconds / 3600)
  // 计算分钟和秒
  const minutes = Math.floor((seconds % 3600) / 60)
  // 计算秒
  const secs = (seconds % 3600) % 60
  // 格式化字符串
  let timeString = ''
  // 补零
  if (hours > 0) {
    timeString += `${hours}小时`
  }
  if (minutes > 0 || hours > 0) {
    timeString += `${minutes}分`
  }
  // 秒数不足两位时，补零
  timeString += `${secs}秒`
  return timeString
}
// 示例
const time='80'
const timeStr = formatTime(time)
console.log(timeStr,'输出为1分20秒')

第二种：传的数据为01:30这种，具体处理方式

//第二种方式：01:30 -> 1分30秒
const formatTimeToClock = timeStr => {
  // 转换时间字符串为分钟和秒数
  const [hours, minutes] = timeStr.split(':').map(Number)
  // 计算总分钟数
  const totalMinutes = hours * 60 + minutes
  // 获取分钟和秒数部分
  const minutesPart = Math.floor(totalMinutes / 60)
  // 计算秒数
  const secondsPart = totalMinutes % 60
  // 格式化结果字符串
  return `${minutesPart}分${secondsPart}秒`
}
const timeStr = '01:30'
const clockStr = formatTimeToClock(timeStr)
console.log(clockStr) // 输出 1分30秒