javascript tutorial - [Solved-5 Solutions] Merge properties of two javascript objects dynamically? - javascript - java script - javascript array
Problem:
We need to be able to merge two (very simple) JavaScript objects at runtime. For example I'd like to:
var obj1 = { food: 'pizza', car: 'ford' }
var obj2 = { animal: 'dog' }
obj1.merge(obj2);
//obj1 now has three properties: food, car, and animal
click below button to copy the code. By JavaScript tutorial team
Does anyone have a script for this or know of a built in way to do this? WE do not need recursion, and WE do not need to merge functions, just methods on flat objects.
Solution 1:
ECMAScript 2015 (ES6) Standard Method
/* For the case in question, we would do: */
Object.assign(obj1, obj2);
/** There's no limit to the number of objects we can merge.
* All objects get merged into the first object.
* Only the object in the first argument is mutated and returned.
* Later properties overwrite earlier properties with the same name. */
const allRules = Object.assign({}, obj1, obj2, obj3, etc);
click below button to copy the code. By JavaScript tutorial team
Method for ES5 and Earlier
for (var attrname in obj2) { obj1[attrname] = obj2[attrname]; }
click below button to copy the code. By JavaScript tutorial team
Note that this will simply add all attributes of obj2 to obj1 which might not be what we want if we still want to use the unmodified obj1. If you're using a framework that craps all over our prototypes then we have to get fancier with checks like hasOwnProperty, but that code will work for 99% of cases. Example function:
/**
* Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1
* @param obj1
* @param obj2
* @returns obj3 a new object based on obj1 and obj2
*/
function merge_options(obj1,obj2){
var obj3 = {};
for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
return obj3;
}
click below button to copy the code. By JavaScript tutorial team
Solution 2:
jQuery also has a utility for this:
jQuery also has a utility for this: jQuery.extend. Taken from the jQuery documentation:
The above code will mutate the object named settings. If we want to create a new object without modifying either argument, use this:
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
/* Merge defaults and options, without modifying defaults */
var settings = $.extend({}, defaults, options);
// The content of settings variable is now the following:
// {validate: true, limit: 5, name: "bar"}
// The 'defaults' and 'options' variables remained the same.
click below button to copy the code. By JavaScript tutorial team
Solution 3:
The Harmony ECMAScript 2015 (ES6) specifies Object.assign which will do this.
Object.assign(obj1, obj2);
Current browser support is getting better es6, but if you're developing for browsers that don't have support, we can use a polyfill.
Solution 4:
Note that underscore.js's extend-method does this in a one-liner:
_.extend({name : 'moe'}, {age : 50});
=> {name : 'moe', age : 50}
click below button to copy the code. By JavaScript tutorial team
Solution 5:
Similar to jQuery extend(), we have the same function in AngularJS:
// Merge the 'options' object into the 'settings' object
var settings = {validate: false, limit: 5, name: "foo"};
var options = {validate: true, name: "bar"};
angular.extend(settings, options);