zoukankan      html  css  js  c++  java
  • js将json格式的list转换为按某个字段分组的map数组

    这几天做的微信公众号项目中,出现了需要将list分组显示的需求,解决方法如下

    var data = [{
    "id": "32b80b76-a81e-4545-8065-1e7c57180801",
    "userId": "qy-uid",
    "qcCode": "140403123001",
    "packageInfo": "秋雨包裹一",
    "tjTime": "2017-12-21 10:38:31.0",
    "pdTime": "2017-12-21 11:05:08.0",
    "shTime": "2017-12-29 10:17:06.0",
    "addUserId": "qy-uid",
    "pdUserId": "qy-uid",
    "shUserId": "qy-uid",
    "pdState": "00",
    "shState": "00",
    "packageState": "00",
    "deleteFlg": "00",
    "uname": "秋雨",
    "uphone": "18151449650"
    }, {
    "id": "9ee2e7f0-0f7a-44e2-b7cc-577d21eb1142",
    "userId": "recorde-test-for-qy-do-not-delete",
    "qcCode": "queen-qcCode003",
    "packageInfo": "绿箭侠包裹三",
    "tjTime": "2017-12-21 10:46:08.0",
    "tijiaoTime": "2017-12-21 10:46:27.0",
    "shTime": "2017-12-29 10:16:59.0",
    "addUserId": "recorde-test-for-qy-do-not-delete",
    "tjUserId": "recorde-test-for-qy-do-not-delete",
    "shUserId": "qy-uid",
    "tjState": "01",
    "shState": "00",
    "packageState": "00",
    "deleteFlg": "00",
    "uname": "奥利弗 ",
    "uphone": "1666666666"
    }, {
    "id": "a35b31b6-b974-4ca6-a4b6-28db3dae9814",
    "userId": "recorde-test-for-qy-do-not-delete",
    "qcCode": "queen-qcCode002",
    "packageInfo": "绿箭侠包裹二",
    "tjTime": "2017-12-21 10:45:44.0",
    "tijiaoTime": "2017-12-21 10:46:27.0",
    "pdTime": "2017-12-21 11:05:26.0",
    "shTime": "2017-12-29 10:17:02.0",
    "addUserId": "recorde-test-for-qy-do-not-delete",
    "tjUserId": "recorde-test-for-qy-do-not-delete",
    "pdUserId": "qy-uid",
    "shUserId": "qy-uid",
    "tjState": "01",
    "pdState": "00",
    "shState": "00",
    "packageState": "00",
    "deleteFlg": "00",
    "uname": "奥利弗 ",
    "uphone": "1666666666"
    }, {
    "id": "d265b81f-4459-4986-bce7-8ef6f4ff3751",
    "userId": "qy-uid",
    "qcCode": "140403123002",
    "packageInfo": "秋雨包裹二",
    "tjTime": "2017-12-21 10:38:47.0",
    "pdTime": "2017-12-21 11:05:13.0",
    "addUserId": "qy-uid",
    "pdUserId": "qy-uid",
    "pdState": "00",
    "packageState": "00",
    "deleteFlg": "00",
    "uname": "秋雨",
    "uphone": "18151449650"
    }, {
    "id": "f32fc473-4e2c-4357-b0bb-6fb44eb9eb74",
    "userId": "recorde-test-for-qy-do-not-delete",
    "qcCode": "queen-qcCode001",
    "packageInfo": "绿箭侠包裹一",
    "tjTime": "2017-12-21 10:45:27.0",
    "tijiaoTime": "2017-12-21 10:46:27.0",
    "pdTime": "2017-12-21 11:05:20.0",
    "addUserId": "recorde-test-for-qy-do-not-delete",
    "tjUserId": "recorde-test-for-qy-do-not-delete",
    "pdUserId": "qy-uid",
    "tjState": "01",
    "pdState": "00",
    "packageState": "00",
    "deleteFlg": "00",
    "uname": "奥利弗 ",
    "uphone": "1666666666"
    }, {
    "id": "f830543a-ae54-49ee-9646-b29e81c50d25",
    "userId": "qy-uid",
    "qcCode": "140403123003",
    "packageInfo": "秋雨包裹三",
    "tjTime": "2017-12-21 10:39:00.0",
    "addUserId": "qy-uid",
    "packageState": "00",
    "deleteFlg": "00",
    "uname": "秋雨",
    "uphone": "18151449650"
    }];

                        var map = {},    //临时记录根据某字段分组的临时键值对变量,用来记录是否已经存在该uname
                            dest = [];   //最终输出数组
                        for(var i = 0; i < data.length; i++){    //遍历list数据
                            var ai = data[i];    //ai代表list中的某一项
                            if(!map[ai.uname]){  //临时键值对变量中不存在此键
                                dest.push({     //将此数据以json对象格式放到数组中{key1:value1,key2:value2},key1是分组的字段,key2是list中的某一条数据
                                    uname: ai.uname,
                                    data: [ai]
                                });
                                map[ai.uname] = ai;    //将未加入map的key放入,这样下次map[ai.uname]就会返回true,map用处到此为止。
                            }else{   //临时键值对中有此键
                                for(var j = 0; j < dest.length; j++){    //遍历list
                                    var dj = dest[j];    //结果数组中某一项数据
                                    if(dj.uname == ai.uname){    //结果数据中此dest[key1]的值和该list[i].uname的值相等时
                                        dj.data.push(ai);    //把list[i]也放入该dest[key1].data中去
                                        break;
                                    }
                                }
                            }
                        }
                        console.info(dest);
  • 相关阅读:
    webstorm打开项目找不到git
    Redis 下载与安装(Windows版)
    element-UI el-table样式(去边框和滚动条样式)
    MVVM
    HTTP
    TCP/IP
    vue双向绑定
    Vue组件化原理
    JavaScript
    css中可继承与不可继承属性
  • 原文地址:https://www.cnblogs.com/aeolian/p/8143997.html
Copyright © 2011-2022 走看看