How to merge JSON objects using plain(without jQuery) JavaScript?

Requirement is to:

Convert from:

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}
];

Convert To:

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}
]

How to merge JSON objects using plain(without jQuery) JavaScript?

Requirement is to:

Convert from:

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}
];

Convert To:

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}
]

• javascript
• json
• sorting

• 1 There might be a method in the underscorejs library that will do it. But I think you'll just have to write some procedural code to loop through your array of objects – Walter Stabosz Commented Jan 26, 2015 at 4:48

4 Answers 4

Here's an example of how to do this... no jquery required.

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"))

Here we iterate backwards through the chartData array operating in place and splicing elements out of the array as the content is merged :

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);

Using underscore.js, it can be done pretty easily:

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

Here is some code that will do it, we first loop through the array to group all of the non-date properties together by date. then append the date property to that intermediate result:

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"}
//]