Merging two objects in JavaScript

Question

I have two JavaScript objects:

var attributes1 = {
    "type": "text/css",
    "rel": "stylesheet",
    "href": baseUrl + "Styles/HtmlLibrary.css"      
};
var attributes2 = {
    "type": "text/css",
    "rel": "stylesheet",
    "href": baseUrl + "Styles/jquery.contextMenu.css"       
};

I there any way to combine the two objects into one object that has two subobjects (associative arrays)? I want to loop throgh it and get each time one set of attributes?

Thanks

There is no concept of associative arrays in JS, these are js objects — Blaster, Jul 04 '12 at 06:07
You mean like `var attributes = [{...},{...}];`? I recommend to read the [MDN JavaScript Guide](https://developer.mozilla.org/en/JavaScript/Guide), it should give you a good understanding of the JS basics. — Felix Kling, Jul 04 '12 at 06:08
duplicate: http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically — Blaster, Jul 04 '12 at 06:08
I think @FelixKling has it right here. It is not exactly a merge, the OP seems to be asking for a way to combine both objects into 1, which is trivial like this: `[attributes1, attributes2]` or even `({library: attributes1, menu: attributes2})` — Ray Toal, Jul 04 '12 at 06:19

score 3 · Accepted Answer · answered Jul 04 '12 at 06:14

yea those aren't arrays, but you can have arrays of objects, i think what you are looking for is this:

var attributes = [
                  {
                   "type": "text/css", 
                   "rel": "stylesheet",
                   "href": baseUrl + "Styles/HtmlLibrary.css"      
                  },
                  {
                   "type": "text/css",
                   "rel": "stylesheet",
                   "href": baseUrl + "Styles/jquery.contextMenu.css"       
                  }];

score 3 · Answer 2 · answered Jul 04 '12 at 06:14

3

Yeah you can easily do that:-

var baseUrl="www.google.com" // Base URL just for the sake of program.
var attributes = {
    "type": "text/css",
    "rel": "stylesheet",
    "href": baseUrl + "Styles/HtmlLibrary.css"      
};
var attributes1 = {
    "type": "text/css",
    "rel": "stylesheet",
    "href": baseUrl + "Styles/jquery.contextMenu.css"       
};
var k=[];
k.push(attributes);
k.push(attributes1)

    //Since K has both the associative arrays now you can refer using
    for(var i=0;i<k.length;i++)
        {
        console.log(k[i].type+" "+k[i].rel+" "+k[i].href)

        }

This is the fiddle URL http://jsfiddle.net/HSdJh/1/

answered Jul 04 '12 at 06:14

Shiv Kumar Ganesh

3,799
10
46
85

1

You can simply do `var k = [attributes, attributes1];`. – Felix Kling Jul 04 '12 at 06:19
Yeah That can be done. I though if he has more than two associative arrays then in that case if he wants to dynamically enters them then this would be great :) – Shiv Kumar Ganesh Jul 04 '12 at 06:28

score 1 · Answer 3 · answered Jul 04 '12 at 06:28

var attributes1 = {
    "type": "text/css",
    "rel": "stylesheet",
    "href": baseUrl + "Styles/HtmlLibrary.css"      
};
var attributes2 = {
    "type": "text/css",
    "rel": "stylesheet",
    "href": baseUrl + "Styles/jquery.contextMenu.css"       
};

var combined = {};

combined.attributes1 = attributes1;
combined.attributes2 = attributes2;


for(var attribute in combined){

    if(combined.hasOwnProperty(attribute)){
        console.log(attribute);
        console.log(combined[attribute]);
    }

}

Merging two objects in JavaScript

3 Answers3