前端数据处理

Posted 2021-07-17 SuperAnt_me

目标：

处理从api获取到的数据，使之格式统一。

---

问题起因：

对于需要的数组、对象数据因前后端执行任务前没有对关键字段进行商讨统一，造成前后端使用的关键字段不同，需要重构项目

解决：

简单数据处理

对于数组数据可直接赋值；

//伪代码
let res = getData()//获取api数据
let arr = res

对于对象数据使用Object.keys()方法对关键字段进行迭代处理；

//伪代码
let res = getData()//获取api数据
let obj = {}
let keys={
sex:'',
name:'',
age:'',
...
}
Object.keys(keys).forEach(item=>{
obj[item]=res[item]
}
return obj

---

复杂数据处理

对于嵌套类型的数据 例如：arr[{},{}]

//arr[{},{}] 像这种较为复杂的数据，我们可以遍历arr同时使用Object.keys()对其进行处理
//伪代码：
// res= [{...},{...},...]
let res = getData()//获取api数据

let arr=[]//空数组用于存储处理后的数据
//遍历res item是其中每个对象 index 可以用于添加一些其它属性值如id
res.map((item,(index))=>{

let obj={}//空对象用于存储res中每个处理后的对象
//keys 整理处理来需要处理的关键字段
let keys={
name:'',
age:'',
sex:'',
...
}

//若数据中不含如id之类的字段，可使用index进行赋值
obj.id = index+1;//id从1开始

Object.keys(keys).forEach(val=>{

obj[val]=item[val]

}
return arr.push(obj)
})