How to join two JavaScript objects without using JQUERY

Question

I have two json objects obj1 and obj2, I want to combine them and create one json object. The resulting json should have all the values ​​from obj2 and the values ​​from obj1 that are not in obj2.

Question: var obj1 = { "name":"manu", "age":23, "occupation":"SE" } var obj2 = { "name":"manu", "age":23, "country":"india" } Expected: var result = { "name":"manu", "age":23, "occupation":"SE", "country":"india" } 

Answer 1

To achieve this, there are several different solutions:

1 - Built-in javascript for-in loop :

 var result = {}; for(var key in obj1) result[key] = obj1[key]; for(var key in obj2) result[key] = obj2[key]; 

2 - Object.keys() :

 var result = {}; Object.keys(obj1).forEach((key) => result[key] = obj1[key]); Object.keys(obj2).forEach((key) => result[key] = obj2[key]); 

3 - Object.assign() :
(Browser compatibility: Chrome: 45, Firefox (Gecko): 34, Internet Explorer: no support, Edge: (Yes), Opera: 32, Safari: 9)

 var result = Object.assign({},obj1, obj2); 

4 - Destruction purpose :
A new possible solution to achieve this goal is the use of Destructuring Assignment , which is partially standardized:

Destructuring destination syntax is a JavaScript expression that allows you to retrieve data from arrays or objects into separate variables.

Using this new syntax, you can merge / merge different objects into one object as follows:

 var result = { ...obj1, ...obj2 }; 

5 - extend the jQuery or lodash :

 var result={}; // using jQuery extend $.extend(result, obj1, obj2); // using lodash _.extend(result, obj1, obj2); 

6 - lodash merge function :

 var result=_.merge(obj1, obj2); 

---

Update 1:

Just keep in mind that when using a for in loop in your native JavaScript, you need to know about your environment in terms of possible prototype changes in core JavaScript objects and global data types. For example, if you use js lib, which adds new material to Array.prototype or Object.prototype .

But if you want to prevent these possible added materials from polluting your objects in for in loops, you can do:

 for(var key in obj1){ if(obj1.hasOwnProperty(key)){ result[key]=obj1[key]; } } 

---

Update 2:

I updated my answer and added solution number 4, which is a new JavaScript feature, but not yet fully standardized. I use it with Babeljs , which is the compiler for writing next-generation JavaScript.

Answer 2

WORKING FIDDLE

The easiest way with jQuery is

 var finalObj = $.extend(obj1, obj2); 

Without jQuery -

 var finalobj={}; for(var _obj in obj1) finalobj[_obj ]=obj1[_obj]; for(var _obj in obj2) finalobj[_obj ]=obj2[_obj]; 

Answer 3

Another solution using underscore.js :

 _.extend({}, obj1, obj2); 

Answer 4

one)

 var merged = {}; for(key in obj1) merged[key] = obj1[key]; for(key in obj2) merged[key] = obj2[key]; 

---

2)

 var merged = {}; Object.keys(obj1).forEach(k => merged[k] = obj1[k]); Object.keys(obj2).forEach(k => merged[k] = obj2[k]); 

OR

 Object.keys(obj1) .concat(Object.keys(obj2)) .forEach(k => merged[k] = k in obj2 ? obj2[k] : obj1[k]); 

---

3) The simplest way:

 var merged = {}; Object.assign(merged, obj1, obj2); 

Answer 5

I used this function to combine objects in the past, I use it to add or update existing properties on obj1 with values ​​from obj2 :

 var _mergeRecursive = function(obj1, obj2) { //iterate over all the properties in the object which is being consumed for (var p in obj2) { // Property in destination object set; update its value. if ( obj2.hasOwnProperty(p) && typeof obj1[p] !== "undefined" ) { _mergeRecursive(obj1[p], obj2[p]); } else { //We don't have that level in the heirarchy so add it obj1[p] = obj2[p]; } } } 

It will process several levels of the hierarchy, as well as objects of the same level. I used it as part of a utility library for managing JSON objects. You can find it here .

Answer 6

This simple function recursively merges JSON objects; note that this function merges all JSON into the first parameter ( target ) if you need a new object to modify this code.

 var mergeJSON = function (target, add) { function isObject(obj) { if (typeof obj == "object") { for (var key in obj) { if (obj.hasOwnProperty(key)) { return true; // search for first object prop } } } return false; } for (var key in add) { if (add.hasOwnProperty(key)) { if (target[key] && isObject(target[key]) && isObject(add[key])) { this.mergeJSON(target[key], add[key]); } else { target[key] = add[key]; } } } return target; }; 

The BTW function instead of the isObject() function can be used as follows:

 JSON.stringify(add[key])[0] == "{" 

but this is not a good solution, because large JSON objects will require a lot of resources.