How to merge two JS objects

Question

I have a JS object lets say json 1

[
    {
        "id": "123",
        "testname": "test123",
        "name": "John Doe",
        "active": true,
        "type": "test6"
    }

 {
        "id": "456",
        "testname": "test564",
        "name": "Ship Therasus",
        "active": true,
        "type": "test7"
    }

.... some 100 entries 
]

and json 2 some like below

[
    {
        "id": "123",
        "country": "USA",
        "state": "KA",
        "age": 24,
        "group": "g1"
    }

 {
        "id": "456",
        "country": "UK",
        "state": "MA",
        "age": 28,
        "group": "G2"
    }

...... 100 entries
]

Now Id is the constant thing between json1 and json2 I want to make a resultant object something like below lets call json3. I want to match the id and get country and state from json2 and append to json 1 .How can i do this using JavaScript?

[
    {
        "id": "123",
        "testname": "test123",
        "name": "John Doe",
        "active": true,
        "type": "test6",
        "country":"USA",
         "state":"KA"
    }

 {
        "id": "456",
        "testname": "test564",
        "name": "Ship Therasus",
        "active": true,
        "type": "test7",
         "country":"UK",
         "state":"MA"
    }
]

If you can rely on array indices that are matching, you could take a simply place these two arrays as elements in a third array and use Underscore's .zip function or implement something similar. underscorejs.org/#zip — Hrishi
– Hrishi, Commented Nov 28, 2014 at 5:07

Sin · Accepted Answer · 2014-11-28 05:18:03Z

2

If you are using jQuery, you can do it like this:

var json1 = [{id:1, one: 1}, {id:2, one: 2}];
var json2 = [{id:1, two: 1}, {id:2, two: 2}];

var merged = $.map(json1, function(v1, i) {
  var result = $.extend({}, v1);
  var v2s = $.grep(json2, function(v2) {
    return v2.id === v1.id;
  });
  for (var i = v2s.length - 1; i >= 0; i--) {
    $.extend(result, v2s[i]);
  };
  return result;
});

non jQuery version:

var merged = [];
for (var i = json1.length - 1; i >= 0; i--) {
  var v1 = json1[i];
  var result = {};
  for (var key in v1) {
    if (v1.hasOwnProperty(key)) {
      result[key] = v1[key];
    }
  }
  for (var j = json2.length - 1; j >= 0; j--) {
    var v2 = json2[j];
    if (v1.id === v2.id) {
      for (var key in v2) {
        if (v2.hasOwnProperty(key)) {
          result[key] = v2[key];
        }
      }
    }
  }
  merged.push(result);
};

edited Nov 28, 2014 at 5:18

answered Nov 28, 2014 at 5:09

Sin

1,1101 gold badge10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Md Ashaduzzaman · Accepted Answer · 2014-11-28 06:24:18Z

1

Note : If you do prefer jQuery.

Using $.extend() you can merge one or more objects into the first one. There are many ways to use $.extend() that solves different scenarios. Your's matches the following one where you have two objects with some common and different properties. As you want to merge both of them into one object and you also want all the uncommon properties of both objects to be there you need to do it like this,

var firstData = [
    {
        "id": "123",
        "testname": "test123",
        "name": "John Doe",
        "active": true,
        "type": "test6"
    },

    {
        "id": "456",
        "testname": "test564",
        "name": "Ship Therasus",
        "active": true,
        "type": "test7"
    }
];

var secondData = [
    {
        "id": "123",
        "country": "USA",
        "state": "KA",
        "age": 24,
        "group": "g1"
    },

 {
        "id": "456",
        "country": "UK",
        "state": "MA",
        "age": 28,
        "group": "G2"
    }
];

// This will remove the properties that you don't want to be in the merged object
$.each(secondData, function(index, object){
    $.each(object, function(key, value){
        if(key == "age"){
            delete secondData[index][key];
        }
        else if(key == "group"){
            delete secondData[index][key];
        }
    });
});

// this is to merge the objects
$.extend(true, firstData, secondData);

// check your console
console.log(firstData);

What .extend() does is merge both object and keep it in the first object. The first argument true specifies that the object will be recursively merged.

jsFiddle

References : $.extend()

edited Nov 28, 2014 at 6:24

answered Nov 28, 2014 at 5:12

Md Ashaduzzaman

4,0462 gold badges20 silver badges34 bronze badges

2 Comments

Shoaib Chikate Over a year ago

OP wants using Javascript not jQuery

Sin Over a year ago

Do the objects in the two arrays need to be in the same order?

Collectives™ on Stack Overflow

How to merge two JS objects

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related