前端数据处理

目标:

处理从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)
})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值