How to combine 2 objects with same properties-Javascript

Question

I want to be able to merge two JavaScript objects with same properties/keys defined. Just that the values are not duplicate. For example I'd like to:

 var obj1 = { 0:{id: 33, name: 'abc', date: "12/12/12", type:"11" }, 1: {id: 33, name: 'abc3', date: "12/13/12", type:"131"} } var obj2 = { 0:{id: 22, name: 'abc1', date: "12/1/13", type: "33" } 1:{id: 4, name: 'abc4', date: "12/4/12", type:"14"} }

here is the fiddle: http://jsfiddle.net/q9c8k2yh/ this is the expected structure:

I want the o/p to be:

var obj3 = { 0: { id: 33, name: 'abc', date: "12/12/12", type:"11" }, 1: { id: 22, name: 'abc1', date: "12/1/13", type: "33" } }

I looked up at the sources online and the most common answer I get:

Object.assign(obj2, obj1);

I have tried:

obj3 = Object.assign(obj2, obj1);//returns { id: 33, name: 'abc', date: "12/12/12", type:"11" } obj3 = Object.assign(obj1, obj2);//return { id: 22, name: 'abc1', date: "12/1/13", type: "33" } obj3 = Object.assign({},obj2, obj1); //return { id: 33, name: 'abc', date: "12/12/12", type:"11" }

but none of them gives me both the objects. I do not want to replace one over the other. is there a way to achieve this?

Thanks!

{0: obj1, 1: obj2}? If you have a small definite number of them at least. — Jeto
– Jeto, Commented Oct 17, 2018 at 20:38

Mark · Accepted Answer · 2018-10-17 20:42:22Z

What you are describing looks more like an array than an object. But if you want an Object with numeric keys, well you can do that:

var obj1 = { id: 33, name: 'abc', date: "12/12/12", type:"11" } var obj2 = { id: 22, name: 'abc1', date: "12/1/13", type: "33" } let arr = [obj1, obj2] // turn array into object: let obj_all = {...arr} console.log(obj_all)

The new object will hold references to the old objects. It's not clear if that's what you are after, or if you want clones.

To make clones you could of course spread the objects:

var obj1 = { id: 33, name: 'abc', date: "12/12/12", type:"11" } var obj2 = { id: 22, name: 'abc1', date: "12/1/13", type: "33" } let arr = [{...obj1}, {...obj2}] let obj_all = {...arr} // changes in original objects have no effect on clones obj1.id="New Value" console.log(obj_all)

Just a note: can be done in one line if necessary: {...[obj1, obj2]}.
The on-liner for clones would be {...[{...obj1}, {...obj2}]}.

skilleo · Accepted Answer · 2018-10-17 20:38:46Z

Sounds like you're looking for a hash map instead of merging 2 objects:

var obj3 = { 0: obj1, 1: obj2 }

Object.assign merges on top the prior argument, where the first argument is the object to replace, so:

Object.assign(obj2, obj1);

Replaces obj2 with itself and obj1 shallowly merged over it.

connexo · Accepted Answer · 2018-10-17 20:41:39Z

You can clone them easily using object rest spread (ES 2018):

var obj1 = { id: 33, name: 'abc', date: "12/12/12", type:"11" } var obj2 = { id: 22, name: 'abc1', date: "12/1/13", type: "33" } var obj3 = { 0: { ...obj1 }, 1: { ...obj2 } } console.log(obj3);

Now if you change obj1 it won't change obj3["0"].

svoychik · Accepted Answer · 2018-10-17 20:52:37Z

Seems like you want to create a new object having integer values as keys and value as requested object

var arrayOfObjects = [obj1, obj2]; //put here object you want to 'merge' var result = Object.assign({}, arrayOfObjects);

Or in case you need a function. It'll look like:

function merge(arrayOfObjects){ return object.assign({}, arrayOfObjects); }

Halil Irmak · Accepted Answer · 2018-10-17 21:18:43Z

Another approach might be this. Stringifies the item and parses it so to make deep clone.

var obj1 = { id: 33, name: 'abc', date: "12/12/12", type:"11" } var obj2 = { id: 22, name: 'abc1', date: "12/1/13", type: { id: 3 } } const mergeWithReference = (...args) => { return args.reduce((acc,item,index) => { acc[index] = JSON.parse(JSON.stringify(item)) return acc }, {}) } const mergedObj = mergeWithReference(obj1, obj2) obj1.id = 85 obj2.type.id = 22 console.log(mergedObj);

Collectives™ on Stack Overflow

How to combine 2 objects with same properties-Javascript

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Related