Combining JavaScript objects into one

Question

I have a function called "Colorbox" (jQuery plugin) that takes a few parameters, for example:

$(this).colorbox({ width : "500px", height : "500px" }); 

I have several different types of "this", although each with its own properties. For example:

 var Type = { video: { width : "500px", height : "500px" }, gallery: { width : "1065px", height : "600px" } } 

In addition, I have other behavior, logic, and a group of default settings (which are overwritten with more specific ones). What I'm trying to do is push all the relevant settings from several objects into one object, so that I can simply call:

 $(this).colorbox(Settings); 

How can I pass an unknown group of properties and their values ​​(for example, "width" and "height") from something like Type.video into the settings? The goal is to be able to call Settings.height and return the value I clicked.

Answer 1

Take a look at the jQuery extend method. It can combine two objects together and all their properties.

On the jQuery example page:

 var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options); 

Settings now contain combined settings and parameter objects.

Answer 2

Non-jQuery solution:

 YOUROBJ.vars = { vars1: { vars1_1: 'an object which will overwrite', vars1_2: 'an object which will be added' } }; YOUROBJ.vars2 = (!YOUROBJ.vars) ? {} : YOUROBJ.vars; YOUROBJ.vars = { vars1: { vars1_1: 'an object which will be overwritten', vars1_3: 'an object which will remain' } }; YOUROBJ.extend = function(obj, defaults) { for (var i in defaults) { if (!obj[i]) { obj[i] = defaults[i]; } else { YOUROBJ.extend(obj[i], defaults[i]); } } }; YOUROBJ.extend(YOUROBJ.vars, YOUROBJ.vars2); delete YOUROBJ.vars2; 

This is useful if you want to add a variable to a shared function object before it is loaded and created.

It also allows the second YOUROBJ.vars to act as the default setting.

Answer 3

JavaScript has a simple built-in function to merge an object. which represents Object.assign () introduced in ES6.

  // creating two JavaScript objects var x = { a: true };var y = { b: false}; // merging two objects with JavaScript native function var obj = Object.assign(x,y); //result Console.log(obj); // output is { a: true, b: false } 

for more information about javascript merge object, please check to combine javascript objects with examples.

Answer 4

If you are using jQuery you should check $. extend .

You can try something like this:

 $.fn.somePlugin = function(options){ settings = $.extend(true, {default_values: "foo"}, options); } 

Answer 5

I also created a "merge" function in Javascript for use for my general purposes:

 if (typeof Object.merge !== 'function') { Object.merge = function (o1, o2) { // Function to merge all of the properties from one object into another for(var i in o2) { o1[i] = o2[i]; } return o1; }; } 

Using:

 var eDiv = document.createElement("div"); var eHeader = Object.merge(eDiv.cloneNode(false), {className: "header", onclick: function(){ alert("Click!"); }}); 

It's faster and dirtier (shallow copy), but it does what I need.

Answer 6

I don't understand your question very well, but I think you should use the $ .extend function:

 Settings=$.extend(Settings, Type.video); 

thus, the settings will receive Type.video properties

Answer 7

Just merging the first level (adding keys from the second object to the first):

 var mergeObjects = function (originalObject, objectToAppend) { for (var item in objectToAppend) { if (objectToAppend.hasOwnProperty(item)) { originalObject[item] = objectToAppend[item]; } } }; 

originalObject must be non-empty!

Answer 8

You can also use this merge object as a reusable component that relies on Object.assign and combines several objects into one without changing the original objects.

Examples:

 const o1 = { a: 1 }; const o2 = { b: 2 }; const o3 = { c: 3 }; const obj = merge(o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } console.log(o1); // { a: 1 } does not mutate objects