javascript - 根据多个key对json进行分组

标签 javascript jquery json nested grouping

我有一个像下面这样的 Json 结构

[
  {
    "category_id": "C1",
    "category_name": "C1_Name",
    "item_id": "C1_I1",
    "item_name": "C1_I1_Name",
    "variant_id": "C1_I1_V1",
    "variant_name": "C1_I1_V1_ Name"
  },
  {
    "category_id": "C1",
    "category_name": "C1_Name",
    "item_id": "C1_I1",
    "item_name": "C1_I1_Name",
    "variant_id": "C1_I1_V2",
    "variant_name": "C1_I1_V2_ Name"
  },
  {
    "category_id": "C1",
    "category_name": "C1_Name",
    "item_id": "C1_I2",
    "item_name": "C1_I2_Name",
    "variant_id": "C1_I2_V1",
    "variant_name": "C1_I2_V1_ Name"
  },
  {
    "category_id": "C1",
    "category_name": "C1_Name",
    "item_id": "C1_I2",
    "item_name": "C1_I2_Name",
    "variant_id": "C1_I2_V2",
    "variant_name": "C1_I2_V2_ Name"
  },
  {
    "category_id": "C2",
    "category_name": "C2_Name",
    "item_id": "C2_I1",
    "item_name": "C2_I1_Name",
    "variant_id": "C2_I1_V1",
    "variant_name": "C2_I1_V1_ Name"
  }
]

我想在 javascript 中将 Json 分组到 N' 级别,比如通过传递键列表。例如给出 category_id、item_id 和 variant_id,我期待以下响应:

[
  {
    "category_id": "C1",
    "category_name": "C1_Name",
    "item": [
      {
        "item_id": "C1_I1",
        "item_name": "C1_I1_Name",
        "variant": [
          {
            "variant_id": "C1_I1_V1",
            "variant_name": "C1_I1_V1_ Name"
          },
          {
            "variant_id": "C1_I1_V2",
            "variant_name": "C1_I1_V2_ Name"
          }
        ]
      },
      {
        "item_id": "C1_I2",
        "item_name": "C1_I2_Name",
        "variant": [
          {
            "variant_id": "C1_I2_V1",
            "variant_name": "C1_I2_V1_ Name"
          },
          {
            "variant_id": "C1_I2_V2",
            "variant_name": "C1_I2_V2_ Name"
          }
        ]
      }
    ]
  }
]

是否需要有关如何解决此问题的帮助?

我尝试了类似下面的方法,但它分组为一个级别。我希望它是递归的。

function groupBy(collection, property) {
    var i = 0, val, index, values = [], result = []; 
    for (; i < collection.length; i++) { 
        val = collection[i][property]; 
        index = values.indexOf(val); 
        if (index > -1) 
            result[index].push(collection[i]); 
        else { 
            values.push(val); result.push([collection[i]]); 
        }
    } 
    return result; 
} 

最佳答案

这是我的任务解决方案(仅 Javascript):

function getItemByKey(arr, key, value){
    // here we look for existing group item in the result array
    return arr.reduce(function (prev, cur) {
        if (prev == null && cur[key] == value) {
            return cur;
        }
        return prev;
    }, null);
}

function checkPropForGroup(prop, key){
    // here we check which columns should stay in the group,
    // and which should go down to group items.
    return prop == key || prop == key.replace("_id", "_name");
}

function cloneSuperItem(src, key){
    // create super item by copying only group related fields 
    var item = {};
    for (prop in src){
        if (checkPropForGroup(prop, key)){
            item[prop] = src[prop];
        }
    }
    item[key+'_group'] = [];
    return item;
}

function cloneSubItem(src, key){
    // create sub-item by copying all but group related fields 
    var item = {};
    for (prop in src){
        if (!checkPropForGroup(prop, key)){
            item[prop] = src[prop];
        }
    }
    return item;
}

function groupArray(arr, args, lvl){
    var key = args[lvl];
    var result = [];
    arr.forEach(function (item, ind, a){
        // find or create super item for group and then create sub item 
        // and push it there 
        var keyItem = getItemByKey(result, key, item[key]);
        if (!keyItem){
            keyItem = cloneSuperItem(item, key);
            result.push(keyItem);
        }
        subItem = cloneSubItem(item, key);
        keyItem[key+'_group'].push(subItem);
    });
    if (args[lvl+1]){
        // recursively make grouping on lower level 
        for (var i = 0; i < result.length; i++){
            result[i][key+'_group'] = 
              groupArray(result[i][key+'_group'], args, lvl + 1);
        }
    }
    return result;
}

function groupArrayMain(arr, keysArray){
    // keys should be simply listed as parameters in order from top group to lower
    return JSON.stringify(groupArray(arr, arguments, 1),null,'\n')
}

var arr = [
  {
    "category_id": "C1",
    "category_name": "C1_Name",
    "item_id": "C1_I1",
    "item_name": "C1_I1_Name",
    "variant_id": "C1_I1_V1",
    "variant_name": "C1_I1_V1_ Name"
  },
  {
    "category_id": "C1",
    "category_name": "C1_Name",
    "item_id": "C1_I1",
    "item_name": "C1_I1_Name",
    "variant_id": "C1_I1_V2",
    "variant_name": "C1_I1_V2_ Name"
  },
  {
    "category_id": "C1",
    "category_name": "C1_Name",
    "item_id": "C1_I2",
    "item_name": "C1_I2_Name",
    "variant_id": "C1_I2_V1",
    "variant_name": "C1_I2_V1_ Name"
  },
  {
    "category_id": "C1",
    "category_name": "C1_Name",
    "item_id": "C1_I2",
    "item_name": "C1_I2_Name",
    "variant_id": "C1_I2_V2",
    "variant_name": "C1_I2_V2_ Name"
  },
  {
    "category_id": "C2",
    "category_name": "C2_Name",
    "item_id": "C2_I1",
    "item_name": "C2_I1_Name",
    "variant_id": "C2_I1_V1",
    "variant_name": "C2_I1_V1_ Name"
  }
]
groupArrayMain(arr, "category_id", "item_id", "variant_id")

我也把它写成jsfiddle

关于javascript - 根据多个key对json进行分组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28871507/

相关文章:

javascript - 如何解决与 jQuery + 其他库的冲突问题

jquery - 如何使用 jQuery Mobile 显示全屏谷歌地图?

.net - WCF 自定义序列化程序

javascript - 后退按钮上的 jQuery 动画

javascript - 将结构数组传递给HTML模板以填充下拉列表

javascript - 使用 ng-repeat 时避免表中的列出现重复索引

javascript - backstretch 导致 chrome 中的其他背景图像出现问题

json - 从 Newtonsoft 的 JSON 序列化器解析 JSON 日期时间

python - 从字典列表中创建嵌套的 json 对象

javascript - 当过滤器属性设置时,Kendo 下拉列表小部件会中断