zoukankan      html  css  js  c++  java
  • 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); 
  • 相关阅读:
    P4396 [AHOI2013]作业
    NOIP2018普及T2暨洛谷P5016 龙虎斗
    NOIP2018普及T1暨洛谷P5015 标题统计 题解
    【交题大桥】团队信息存档
    markdown浅谈
    洛谷P1690 贪婪的Copy 题解
    洛谷P4994 终于结束的起点 题解
    洛谷P4995 跳跳!题解
    这么多都变了,洛谷4还会远吗?
    洛谷P1396 营救 题解
  • 原文地址:https://www.cnblogs.com/liao123/p/12943527.html
Copyright © 2011-2022 走看看