javascript - 根据子值合并数组中的对象

我有一个填充对象的数组。当它们具有匹配的特定子值时，如何合并该数组内的对象？

我的数组如下所示:

var data = [
    {
        prod_name:"test1", type:"1", color:"white", product_id:"5"
    },
    {
        prod_name:"test2", type:"1", color:"green", product_id:"7"
    },
    {
        prod_name:"test2", type:"2", color:"green", product_id:"7"
    },
    {
        prod_name:"test3", type:"4", color:"red", product_id:"8"
    },
    {
        prod_name:"test4", type:"2", color:"white", product_id:"21"
    }
];

我想基于匹配的product_id合并对象。

如果值不相同，我想保留两个值，用逗号分隔。因此，先前数组的结果将变为:

[
    {
        prod_name:"test1", type:"1", color:"white", product_id:"5"
    },
    {
        prod_name:"test2", type:"1,2", color:"green", product_id:"7"
    },
    {
        prod_name:"test3", type:"4", color:"red", product_id:"8"
    },
    {
        prod_name:"test4", type:"2", color:"white", product_id:"21"
    }
];

数组缩小为1，因为它具有重复项，并且两个不相同的值通过逗号type:"1,2"合并和分隔。

我认为以下方法会起作用:

jQuery.each( data, function( i, val ) {
    var productID = val.product_id;
    var index_key = i;
    jQuery.each( data, function( i, val ) {
        if(val.product_id == productID && data[index_key] != data[i]){
            jQuery.extend(data[index_key], data[i]);
        }
    });
});

但这只会覆盖第一个匹配项的type值，并保留两个条目。

对于“可合并”项，值prod_name和product_id始终相同。

有谁知道达到预期结果的方法吗？

更新:
稍后可能会添加不同的值(产品属性)。因此，我宁愿选择一种方法，该方法不专门检查type属性，而是检查不是product_id或prod_name的传递，如果有匹配，则将其与逗号合并。

FIDDLE

最佳答案

在下面的示例中，我首先创建对象以实现唯一值(通过project_id)，然后将对象转换为数组。在第一个循环中，我检查res中是否不存在该项-放入res中，否则我仅更改属性类型

var res = {};

$.each(data, function (key, value) {
    if (!res[value.product_id]) {
        res[value.product_id] = value;
    } else {
        res[value.product_id].type = [
          res[value.product_id].type,
          value.type
        ].join(',');
    }
});

data = $.map(res, function (value) {
  return value;
});

console.log(data);

Example