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

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

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) // 解码 Base64const byteArray = new Uint8Array(binaryString.length) // 创建一个新的 Uint8Array 对象// 将 base64 解码为 Uint8Arrayfor (let i = 0; i < binaryString.length; i++) {byteArray[i] = binaryString.charCodeAt(i)}// 将 Uint8Array 转换为 Blobconst 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秒