如何使用JavaScript合並JSON對象？

Question

如何使用普通（沒有jQuery）JavaScript合並JSON對象？

要求是：

轉換自：

chartData=[
      {"date":"2014-05-1","CAT1":0.1},
      {"date":"2014-05-1","CAT2":0.2},
      {"date":"2014-05-1","CAT3":0.3},
      {"date":"2014-05-1","UNSET":0.4},
      {"date":"2014-05-2","CAT1":0.4},
      {"date":"2014-05-2","CAT2":0.3},
      {"date":"2014-05-2","CAT3":0.2},
      {"date":"2014-05-2","UNSET":0.1}
];

轉換成：

chartData=[
    {"date":"2014-05-1","CAT1":0.1,"CAT2":0.2,"CAT3":0.3,"UNSET":0.4},           
    {"date":"2014-05-2","CAT1":0.4,"CAT2":0.3,"CAT3":0.2,"UNSET":0.1}
]

Answer 1

在這里，我們向后遍歷在適當位置操作的chartData數組，並在合並內容時將元素拼接出數組：

var chartData=[{"date":"2014-05-1","CAT1":0.1},{"date":"2014-05-1","CAT2":0.2},{"date":"2014-05-1","CAT3":0.3},{"date":"2014-05-1","UNSET":0.4},  {"date":"2014-05-2","CAT1":0.4},{"date":"2014-05-2","CAT2":0.3},{"date":"2014-05-2","CAT3":0.2},{"date":"2014-05-2","UNSET":0.1}];

var chartDates = {}; /* stores references to elements for each date */
for (var i=chartData.length-1; i >= 0; i--) { 
    var date = chartData[i]['date'];
    if (date in chartDates) { 
        for (var k in chartData[i]) { 
            chartDates[date][k] = chartData[i][k];
        }
        chartData.splice(i,1);
    } else { 
        chartDates[date] = chartData[i];
    }
}
console.log(chartData);

Answer 2

以下是如何執行此操作的示例...無需jquery。

chartData=[{"date":"2014-05-1","CAT1":0.1},{"date":"2014-05-1","CAT2":0.2},{"date":"2014-05-1","CAT3":0.3},{"date":"2014-05-1","UNSET":0.4},{"date":"2014-05-2","CAT1":0.4},{"date":"2014-05-2","CAT2":0.3},{"date":"2014-05-2","CAT3":0.2},{"date":"2014-05-2","UNSET":0.1}];

function groupProps(orig, key) {
    var newArr = [],
        groups = {},
        newItem, i, j, cur;
    for (i = 0, j = orig.length; i < j; i++) {
        cur = orig[i];
        if (!(cur[key] in groups)) {
            groups[cur[key]] = {date: cur[key] };
            newArr.push(groups[cur[key]]);
        }        
        for (var prop in cur) {
            if (prop != key) {
                groups[cur[key]][prop] = cur[prop];
            }
        }
    }
    return newArr;
}

console.log(groupProps(chartData, "date"))

Answer 3

下面是一些代碼，我們首先遍歷數組，按日期將所有非日期屬性組合在一起。 然后將date屬性附加到該中間結果：

var chartData = [
        {"date": "2014-05-1", "CAT1": 0.1},
        {"date": "2014-05-1", "CAT2": 0.2},
        {"date": "2014-05-1", "CAT3": 0.3},
        {"date": "2014-05-1", "UNSET": 0.4},
        {"date": "2014-05-2", "CAT1": 0.4},
        {"date": "2014-05-2", "CAT2": 0.3},
        {"date": "2014-05-2", "CAT3": 0.2},
        {"date": "2014-05-2", "UNSET": 0.1}
    ];


function mergeValues(chartData) {
    var tempObj = {};
    for (i in chartData) {
        var date = chartData[i].date;
//remove the date
        delete chartData[i].date;
//get the remaining keys
        var keys = Object.keys(chartData[i]);
        tempObj[date] = tempObj[date] || {};
        for (j in keys) {
            tempObj[date][keys[j]] = chartData[i][keys[j]];
        }

    }
    console.log(tempObj);
//{"2014-05-1":{ CAT1:0.1, CAT2:0.2, CAT3:0.3, UNSET:0.4}
//{"2014-05-2":{ CAT1:0.4, CAT2:0.3, CAT3:0.2, UNSET:0.1}



    var arr = [];
    var keys = Object.keys(tempObj);
    for (k in keys) {
        var obj = tempObj[keys[k]];
//add the date
        obj.date = keys[k];
        arr.push(obj);
    }

    return arr;

}
console.log(mergeValues(chartData));
//
//[
//    {"CAT1":0.1,"CAT2":0.2,"CAT3":0.3,"UNSET":0.4,"date":"2014-05-1"},           
//    {"CAT1":0.4,"CAT2":0.3,"CAT3":0.2,"UNSET":0.1,"date":"2014-05-1"}
//]

Answer 4

使用underscore.js，它可以很容易地完成：

var groupedBy = _.groupBy(chartData, 'date');
var a = _.reduce(groupedBy, function(a, c) {
    a.push(_.reduce(c, function(a2, c2){ 
        for(var i in c2) { a2[i] = c2[i]; }
        return a2;
    }, { }));
    return a;
},[]); // 'a' holds the desired merged object