按照json键值对中的某一个值重新排序json

2017-09-05

关键词”json根据共同字段分组”,google”JSON grouped according to common fields”

有时候我们会遇到一种需求，就是将后台返回给我们的json数据根据某一个值进行重新排序.
这里展示一下对本案例json的一些研究，可能会有进一步算法范畴的拓展.

案例二维码如下(本案例页面、标签、功能均是根据返回数据重组之后，动态拼接生成，长度无限)：

可能服务器端返回的数据如下:


var data={
    "error": "",
    "status": 200,
    "usedtime": 0,
    "srvtime": "2017-08-31 15:54:22",
    "islogin": 0,
    "iswork": true,
    "tag": "adds45as4d5as4d54sa4d5sa4d5as4",
    "data":  [
                {
                    productName:'大白菜',
                    age:25,
                    height:170,
                    tag: '新品上市'
                },
                {
                    productName:'小白菜',
                    age:31,
                    height:169,
                    tag: '新品上市'
                },
                {
                    productName:'昨天的白菜',
                    age:31,
                    height:167,
                    tag: '特价优惠'
                },
                {
                    productName:'前天的白菜',
                    age:22,
                    height:160，
                    tag: '特价优惠'
                },
                {
                    productName:'内部白菜',
                    age:23,
                    height:159,
                    tag: '线上直售'
                }
            ]

在做前台展示的时候，要求我们根据 “tag”,将所有数据进行分类，比如现在的分成三组”新品上市”、”特价优惠”、”线上直售”

我的算法(对比之后，个人觉得比较优异)


var tempData = data.data;

//解析整个json，按标签分类
var tree = {};
$.each(tempData, function(i, val) {
    var tagValue = val.tag;
    if (!tree[tagValue]) {
        tree[tagValue] = {
            children: []
        } 
    }
    tree[tagValue].children.push({
    
        productName: val.productName,
        age: val.age,
        height: val.height,
        tag: val.tag
        
        //自定义需要的元素
 
    });
});
// 算法部分到此结束

//循环出tree里面的数据
for (var item in tree){
   for(j=0;j<tree[item].children.length;j++){
         //输出 产品名
         console.log(tree[item].children[j].productName);
   }

}

这里需要对json有一定的了解：比如json型数据访问格式不一定是 x.productName,也可以是 x[productName] ,比如 tree[‘线上直售’]在这里等于以下:

[
  {
    productName:'内部白菜',
    age:23,
    height:159,
    tag: '线上直售'
  }
]

在这里补充一句:实训时，老师很排斥使用jquery.但是在实际生产，我发现大家依然在使用jquery语法，但是这个是zepto不是jquery，如果没有使用过zepto的同学可以搜索一下，是一个选取部分使用高频的jquery代码的库，体积非常小.

拓展中……