Combining JavaScript Objects into One

Question

I have a function called "Colorbox" (jQuery plugin) that takes a number of parameters like so:

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

I have several different types of "this", though, each with their own properties. Like so:

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

Beyond that, I have other behaviors, logic, and a 'default' group of settings (which get overwritten by more specific ones). What I'm trying to do is push all the appropriate settings, from multiple objects, into a single Object so I can just call:

$(this).colorbox(Settings); 

How would I transfer an unknown group of properties and their values (for example "width" and "height") from something like Type.video into Settings? The goal is to be able to call Settings.height and get back the value I pushed in.

Answer 1

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

From JQuery's example page:

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

Now settings contains the merged settings and options objects.

Answer 2

JavaScript have a simple native function to merge object. which is 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 merging object please check at merge JavaScript objects with examples.

Answer 3

A non-jQuery solution is:

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 wish to add a variable to a general functions object before it has been loaded and created.

This also enables the second YOUROBJ.vars to act as the default setting,.

Answer 4

If you're using jQuery you should checkout the $.extend function.

You could try something like this:

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

Answer 5

I have also created a "merge" function in Javascript to 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; }; } 

Usage:

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

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

Answer 6

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

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

in this way Settings will get Type.video properties

Answer 7

Simply first level merging (appending keys from second object to first one):

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

originalObject must be non-null!