前端数据处理

2021/6/2 18:51:05

编程Tag： 前端 let obj item 数据处理 keys res arr

本文主要是介绍前端数据处理，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

目标：

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

})

这篇关于前端数据处理的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

前端数据处理

目标：

问题起因：

解决：

简单数据处理

复杂数据处理

相关编程文章