开篇语:
在前端日常开发中,往往会碰到要向后台请求数据,然后前端把数据渲染出来的工作。前后端的工作是分离开来的,当后台接口没出来之前,那前端这边肯定会做一些模拟数据来做渲染。
但这样当我们拿到接口的时候,后台返回的JSON数据字段往往不尽相同,这样就脑壳疼。
为了让后台json数据与自己之前渲染上去的字段不冲突,特意写了一个方法来同步这些字段,我把它称为“后台JSON数据前端序列化”。
使用案例:
后台传回JSON数据如下:
[ {Name: ‘Liaomm‘, Sex: ‘1‘, ID: ‘4509812000077271234‘, Address: ‘广西壮族自治区北流市某某某某‘} ]
你希望的JSON字段是:
[ {username: ‘Liaomm‘, sex: ‘1‘, idCard: ‘4509812000077271234‘, address: ‘广西壮族自治区北流市某某某某‘} ]
JSON数据中字段与你开发是的字段冲突,那么我们把它统一一下。
方法如下,具体说明也写在了类里面,用的Es6语法写的。
/** *@Description: 公用组件字段统一处理 *@author Chendy *@date 2020/5/9 * 使用方法:先通过dataStandard转换数据为二维数组,然后在通过jsonStandard生成想要得到的数组 **/ class Standard{ /** * * @param jsonList 参数列表 * @param dataList 数据列表 */ jsonStandard(jsonList, dataList){ let jsonAry = []; for(let i = 0; i < dataList.length; i++){ let json = {}; for(let j = 0; j < jsonList.length; j++){ json[jsonList[j]] = dataList[i][j]; } jsonAry.push(json); } return jsonAry; } /** * 数据列表变二维数组 * @param dataList 待序列化的数据 [{Name: ‘Liaomm‘, Sex: ‘1‘, ID: ‘450981200007271234‘, Address: ‘广西某某某某某某某‘}] * @param jsonList json参数列表 [‘Name‘, ‘Sex‘, ‘ID‘, ‘Address‘] * @param fiels 取值字段 [‘username‘, ‘sex‘, ‘idCard‘, ‘address‘] */ dataStandard(dataList, jsonList, fiels){ let list = []; for(let i = 0; i < dataList.length; i++){ list[i] = []; for(let j = 0; j < fiels.length; j++){ list[i][j] = dataList[i][fiels[j]]; } } //调用序列化函数 let _list = this.jsonStandard(jsonList, list); return _list; } } export { Standard };
使用方法:
const stand = new Standard(): let dataList = [{Name: ‘Liaomm‘, Sex: ‘1‘, ID: ‘123456456464646464‘, Address: ‘广西某某某某某‘}]; //后台返回的数据 let jsonList = [‘Name‘, ‘Sex‘, ‘ID‘, ‘Adress‘];// JSON数据中的字段 let fiels = [‘username‘, ‘sex‘, ‘idCard‘, ‘addresss‘]; //需要替换成的字段 let _list = stand.dataStandard(dataList, jsonList, fiels);