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 to objects togeter 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

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 3

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 4

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 {
            FC.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 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.