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.