JS实现后台JSON格式数据的序列化

开篇语:

在前端日常开发中,往往会碰到要向后台请求数据,然后前端把数据渲染出来的工作。前后端的工作是分离开来的,当后台接口没出来之前,那前端这边肯定会做一些模拟数据来做渲染。

但这样当我们拿到接口的时候,后台返回的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); 
原文地址:https://www.cnblogs.com/liao123/p/12943527.html