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.

possible duplicate of How can I merge properties of two JavaScript objects dynamically? — givanse
– givanse, Commented Mar 9, 2014 at 21:24
Please see my answer in stackoverflow.com/a/33572520/2934015 for caveats and an alternate solution. — Spike Sagal
– Spike Sagal, Commented Nov 6, 2015 at 20:32

Community · Accepted Answer · 2020-04-01 12:31:19Z

82

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.

edited Apr 1, 2020 at 12:31

CommunityBot

11 silver badge

answered Aug 26, 2009 at 13:31

Matthew Manela

16.8k3 gold badges67 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Doug Avery Over a year ago

This looks perfect! I guess I thought there would be a built-in javascript method for this, but Extend seems to do exactly what I need. Thanks!

Alejandro García Iglesias Over a year ago

This seems useful to the OP but technically it's not what the question asks for. The OP didn't mentioned he wanted to use jQuery for that... Just plain JavaScript.

Matthew Manela Over a year ago

The OP is writing a jQuery plugin sp it would seem silly to give a more complicated solution when it would make most sense to use a jQuery function inside of a jQuery plugin.

Venu immadi · Accepted Answer · 2015-08-26 07:10:11Z

13

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.

answered Aug 26, 2015 at 7:10

Venu immadi

1,60512 silver badges20 bronze badges

3 Comments

Herald Smit Over a year ago

Upvoted. I had to upgrade node, because of the "undefined is not a function" error - even when running node with the --harmony flag...

user2932053 Over a year ago

This does not work with nested layers in objects, it only works at the top level

collapsar Over a year ago

For the sake of completeness: The target of the merge is the first argument to Object.assign, ie. x in the sample code is mutated. See here(MDN) for details.

mummybot · Accepted Answer · 2015-05-22 12:46:36Z

12

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,.

edited May 22, 2015 at 12:46

answered Feb 23, 2010 at 12:19

mummybot

2,7982 gold badges28 silver badges31 bronze badges

3 Comments

mediafreakch Over a year ago

What does "FC" refer to?

John Gibb Over a year ago

My guess is they actually are using this code in their code base calling it FC, and changed it to YOUROBJ to answer the question and just missed a spot.

mummybot Over a year ago

Correct. Updated the solution.

Brian Landau · Accepted Answer · 2009-08-26 13:35:56Z

6

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);
}

answered Aug 26, 2009 at 13:35

Brian Landau

962 bronze badges

Comments

palswim · Accepted Answer · 2010-08-16 23:01:59Z

4

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.

answered Aug 16, 2010 at 23:01

palswim

12.2k8 gold badges57 silver badges79 bronze badges

2 Comments

timoxley Over a year ago

Warning: extending the Object prototype like that is unadvisable and generally dangerous. Pretty good writeup on the dangers of this and when/how you can get away with it here sugarjs.com/native and a great talk on the subject here blip.tv/jsconf/…

palswim Over a year ago

@timoxley: If you look closely, it isn't actually modifying the Object prototype.

mck89 · Accepted Answer · 2009-08-26 13:34:14Z

3

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

answered Aug 26, 2009 at 13:34

mck89

19.3k17 gold badges93 silver badges111 bronze badges

1 Comment

Doug Avery Over a year ago

Fair enough about the question. Thanks for the example, this is perfect.

user11153 · Accepted Answer · 2014-04-05 15:42:53Z

1

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!

edited Apr 5, 2014 at 15:42

answered Apr 5, 2014 at 14:58

user11153

8,9866 gold badges52 silver badges51 bronze badges

4 Comments

Prusprus Over a year ago

In what case would hasOwnProperty trigger a false result in the check? Is there additional items that the foreach loop will extract out of the object?

user11153 Over a year ago

@Prusprus "The use of hasOwnProperty() prevents the loop from enumerating over any inherited properties on the object"

Prusprus Over a year ago

That's a good reference, thanks for that. So I guess I'm a little confused as to how an array (say in the example given thru your URL) can have inherited properties, if it's just an array?

user11153 Over a year ago

@Prusprus Every array inherits properties added to Array.prototype: "Array instances inherit from Array.prototype. As with all constructors, you can change the constructor's prototype object to make changes to all Array instances."

Collectives™ on Stack Overflow

Combining JavaScript Objects into One

7 Answers 7

3 Comments

3 Comments

3 Comments

Comments

2 Comments

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

3 Comments

3 Comments

Comments

2 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related