前端如何处置惩罚后端传入的复杂数据格式

在前后端联调过程中不难发现，偶然候从后端获取到的数据格式并不是我们所想要的格式，这时候就需要我们自己动手去处置惩罚了。最近在开发项目过程中也是遇到了许多传入的数据格式和自己所想要展示的有所区别，这里就先记录一下吧，总结总结，以防后续开发过程中再需要。（后续遇到其他也会连续举行更新）
目录
1.对象转数组
2.两个数组整合为一个数组
3.base64数据转为文件
4.时间处置惩罚方式

---

1.对象转数组

需要的格式是数组，雷同于以下

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

复制代码

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

1. statusCount: {
2.   "reported": 0,
3.   "appli": 0,
4.   "confirm": 0,
5.   "automation": 0,
6.   "automationSummary": 0,
7.   "operationStaffTermination": 0,
8.   "operationStaffPermission": 0
9. }

复制代码

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

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

复制代码

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

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

1. const tableList = ref([
2.   {
3.     fileName:'今日',
4.     stationName:'北京站',
5.     workContent:'工作内容1'
6.   },
7.   {
8.     fileName:'昨日',
9.     stationName:'上海站',
10.     workContent:'工作内容2'
11.   },
12.   {
13.     fileName:'今日',
14.     stationName:'广州站',
15.     workContent:'工作内容3'
16.   },
17.   {
18.     fileName:'今日',
19.     stationName:'深圳站',
20.     workContent:'工作内容4'
21.   }
22. ])

复制代码

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

1. workingOrders: {
2.   "yesterdayCompleted": [
3.     {
4.       "stationName": "string",
5.       "workContent": "string"
6.     }
7.   ],
8.   "todayStarted": [
9.     {
10.       "stationName": "string",
11.       "workContent": "string"
12.     }
13.   ]
14. }

复制代码

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

1. //遍历昨日完工单
2. workingOrders.yesterdayCompleted.forEach(item => {
3.   tableList.value.push({
4.     fileName: '昨日',
5.     stationName: item.stationName,
6.     workContent: item.workContent
7.   })
8. })
9. //遍历今日完工单
10. workingOrders.todayStarted.forEach(item => {
11.   tableList.value.push({
12.     fileName: '今日',
13.     stationName: item.stationName,
14.     workContent: item.workContent
15.   })
16. })

复制代码

3.base64数据转为文件

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

1. const recordingList=ref([
2.   {
3.     id:1,
4.     name:'录音1',
5.     url:'http://localhost:3000/static/audio/1.mp3',
6.     duration:'00:01:00',
7.     file:File
8.   },
9.   {
10.     id:2,
11.     name:'录音2',
12.     url:'http://localhost:3000/static/audio/2.mp3',
13.     duration:'00:02:00',
14.     file:File
15.   }
16. ])

复制代码

对方传来的数据样式

1. data: [
2.   {
3.     "id": "文件ID",
4.     "mp3FileData": "base64编码的音频文件数据",
5.     "fileName": "文件名",
6.     "createTime": "文件创建时间",
7.     "duration": "录音时长"
8.   }
9. ]

复制代码

转化方式

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

复制代码

4.时间处置惩罚方式

偶然候大概后端传给我们的时间格式并不是我们想要的，所以在前端这里还需要做个中间处置惩罚，例如传给我的时间数据为99秒，亦或者是01:30这种，而我们想要的格式是多少小时多少分或者多少秒，起首对于第一种数据举行处置惩罚方式如下：

1. // 将秒转换为小时、分钟和秒的字符串
2. const formatTime = seconds => {
3.   // 秒数转化为小时、分钟、秒
4.   const hours = Math.floor(seconds / 3600)
5.   // 计算分钟和秒
6.   const minutes = Math.floor((seconds % 3600) / 60)
7.   // 计算秒
8.   const secs = (seconds % 3600) % 60
9.   // 格式化字符串
10.   let timeString = ''
11.   // 补零
12.   if (hours > 0) {
13.     timeString += `${hours}小时`
14.   }
15.   if (minutes > 0 || hours > 0) {
16.     timeString += `${minutes}分`
17.   }
18.   // 秒数不足两位时，补零
19.   timeString += `${secs}秒`
20.   return timeString
21. }
22. // 示例
23. const time='80'
24. const timeStr = formatTime(time)
25. console.log(timeStr,'输出为1分20秒')

复制代码

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

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。