merge two json object based on key value in javascript

Question

I need to merge two json object based on key value using javascript.

I have two different variable g and c.

terms: All values need to merge.

var g = [ { id: 36, name: 'AAA', goal: 'yes' },
    { id: 40, name: 'BBB', goal: 'yes' },
    { id: 57, name: 'CCC', goal: 'yes' },
    { id: 4, name: 'DDD', goal: 'yes' },
    { id: 39, name: 'EEE', goal: 'yes' },
    { id: 37, name: 'FFF', goal: 'yes' },
    { id: 59, name: 'GGG', goal: 'yes' },
    { id: 50, name: 'III', goal: 'yes' },
    { id: 43, name: 'HHH', goal: 'yes' },
    { id: 35, name: 'JJJ', goal: 'yes' } ]


 var c = [ { id: 36, name: 'AAA', circle: 'yes' },
    { id: 40, name: 'BBB', circle: 'yes' },
    { id: 57, name: 'CCC', circle: 'yes' },
    { id: 42, name: 'ZZZ', circle: 'yes' },
    { id: 4, name: 'DDD', circle: 'yes' },
    { id: 39, name: 'EEE', circle: 'yes' },
    { id: 37, name: 'FFF', circle: 'yes' },
    { id: 59, name: 'GGG', circle: 'yes' },
    { id: 43, name: 'HHH', circle: 'yes' },
    { id: 35, name: 'JJJ', circle: 'yes' },
    { id: 100, name: 'JJJ', circle: 'yes' } ]

I tried the following code: but i merge what are have same id in 'c' variable. but i need to merge compare 'g' and 'c'.

   var arrayList = [];
    for(var i in g) {
        var getid = g[i].id;
        var getname = g[i].name;
        var getgoal = g[i].goal;
        for(var j in c){
            var compareid = c[j].id;
            if(getid == compareid){
                var obj = {};
                obj.id = getid;
                obj.name = getname;
                obj.goal =  'yes';
                obj.circle = 'yes';
                console.log(obj);
                arrayList.push(obj);
            }
         }

    }
    console.log(arrayList);

Expected output:

[ { id: 36, name: 'AAA', goal: 'yes',circle: 'yes' },
    { id: 40, name: 'BBB', goal: 'yes',circle: 'yes' },
    { id: 57, name: 'CCC', goal: 'yes',circle: 'yes' },
    { id: 4, name: 'DDD', goal: 'yes' ,circle: 'yes' },
    { id: 39, name: 'EEE', goal: 'yes' ,circle: 'yes' },
    { id: 37, name: 'FFF', goal: 'yes' ,circle: 'yes'},
    { id: 59, name: 'GGG', goal: 'yes' ,circle: 'yes'},
    { id: 50, name: 'III', goal: 'yes' ,circle: 'no'},
    { id: 43, name: 'HHH', goal: 'yes' ,circle: 'yes'},
    { id: 35, name: 'JJJ', goal: 'yes' ,circle: 'yes'} ,
    { id: 42, name: 'ZZZ', goal: 'no' , circle: 'yes' },
    { id: 100, name: 'JJJ',goal: 'no' , circle: 'yes' }]

Answer 1

You forgot to push obj in the first loop in case the id doesn't exist in c and to loop through c in case one or more id's of that object does not exist in g.

var g = [
        { id: 36, name: 'AAA', goal: 'yes' },
        { id: 40, name: 'BBB', goal: 'yes' },
        { id: 57, name: 'CCC', goal: 'yes' },
        { id: 4, name: 'DDD', goal: 'yes' },
        { id: 39, name: 'EEE', goal: 'yes' },
        { id: 37, name: 'FFF', goal: 'yes' },
        { id: 59, name: 'GGG', goal: 'yes' },
        { id: 50, name: 'III', goal: 'yes' },
        { id: 43, name: 'HHH', goal: 'yes' },
        { id: 35, name: 'JJJ', goal: 'yes' }
    ],
    c = [
        { id: 36, name: 'AAA', circle: 'yes' },
        { id: 40, name: 'BBB', circle: 'yes' },
        { id: 57, name: 'CCC', circle: 'yes' },
        { id: 42, name: 'ZZZ', circle: 'yes' },
        { id: 4, name: 'DDD', circle: 'yes' },
        { id: 39, name: 'EEE', circle: 'yes' },
        { id: 37, name: 'FFF', circle: 'yes' },
        { id: 59, name: 'GGG', circle: 'yes' },
        { id: 43, name: 'HHH', circle: 'yes' },
        { id: 35, name: 'JJJ', circle: 'yes' },
        { id: 100, name: 'JJJ', circle: 'yes' }
    ],
    arrayList = [], obj_c_processed = [];

for (var i in g) {
    var obj = {id: g[i].id, name: g[i].name, goal: g[i].goal};

    for (var j in c) {
        if (g[i].id == c[j].id) {
            obj.circle = c[j].circle;
            obj_c_processed[c[j].id] = true;
        }
    }

    obj.circle = obj.circle || 'no';
    arrayList.push(obj);
}

for (var j in c){
    if (typeof obj_c_processed[c[j].id] == 'undefined') {
        arrayList.push({id: c[j].id, name: c[j].name, goal: 'no', circle: c[j].circle});
    }
}

console.log(arrayList);

Answer 2

Using undescore.js, you can write some function like this:

var a = [ { id: 36, name: 'AAA', goal: 'yes' },
    { id: 40, name: 'BBB', goal: 'yes' },
    { id: 57, name: 'CCC', goal: 'yes' },
    { id: 4, name: 'DDD', goal: 'yes' },
    { id: 39, name: 'EEE', goal: 'yes' },
    { id: 37, name: 'FFF', goal: 'yes' },
    { id: 59, name: 'GGG', goal: 'yes' },
    { id: 50, name: 'III', goal: 'yes' },
    { id: 43, name: 'HHH', goal: 'yes' },
    { id: 35, name: 'JJJ', goal: 'yes' } ];

var b = [ { id: 36, name: 'AAA', circle: 'yes' },
    { id: 40, name: 'BBB', circle: 'yes' },
    { id: 57, name: 'CCC', circle: 'yes' },
    { id: 42, name: 'ZZZ', circle: 'yes' },
    { id: 4, name: 'DDD', circle: 'yes' },
    { id: 39, name: 'EEE', circle: 'yes' },
    { id: 37, name: 'FFF', circle: 'yes' },
    { id: 59, name: 'GGG', circle: 'yes' },
    { id: 43, name: 'HHH', circle: 'yes' },
    { id: 35, name: 'JJJ', circle: 'yes' },
    { id: 100, name: 'JJJ', circle: 'yes' } ];


function merge_object_arrays (arr1, arr2, match) {
  return _.union(
    _.map(arr1, function (obj1) {
      var same = _.find(arr2, function (obj2) {
        return obj1[match] === obj2[match];
      });
      return same ? _.extend(obj1, same) : obj1;
    }),
    _.reject(arr2, function (obj2) {
      return _.find(arr1, function(obj1) {
        return obj2[match] === obj1[match];
      });
    })
  );
}

document.getElementsByTagName('pre')[0].innerHTML = JSON.stringify(
  merge_object_arrays(a, b, 'id'), null, 2
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

<pre>
</pre>

Try running it here.

Answer 3

Try using jquery. Try this :

var g= [ 
    { id: 36, name: 'AAA', goal: 'yes' },
    { id: 40, name: 'BBB', goal: 'yes' },
    { id: 57, name: 'CCC', goal: 'yes' },
    { id: 4, name: 'DDD', goal: 'yes' },
    { id: 39, name: 'EEE', goal: 'yes' },
    { id: 37, name: 'FFF', goal: 'yes' },
    { id: 59, name: 'GGG', goal: 'yes' },
    { id: 50, name: 'III', goal: 'yes' },
    { id: 43, name: 'HHH', goal: 'yes' },
    { id: 35, name: 'JJJ', goal: 'yes' } ];


 var c= [ 
    { id: 36, name: 'AAA', circle: 'yes' },
    { id: 40, name: 'BBB', circle: 'yes' },
    { id: 57, name: 'CCC', circle: 'yes' },
    { id: 42, name: 'ZZZ', circle: 'yes' },
    { id: 4, name: 'DDD', circle: 'yes' },
    { id: 39, name: 'EEE', circle: 'yes' },
    { id: 37, name: 'FFF', circle: 'yes' },
    { id: 59, name: 'GGG', circle: 'yes' },
    { id: 43, name: 'HHH', circle: 'yes' },
    { id: 35, name: 'JJJ', circle: 'yes' },
    { id: 100, name: 'JJJ', circle: 'yes' } ];

var combine_obj={};
$.extend(combine_obj, g, c);

OR using simple javascript

var combine_obj={};
for(var key in g)  combine_obj[key]=g[key];
for(var key in c)  combine_obj[key]=c[key];