Merge 2 sets of Object + Array Using Javascript

Question

I am trying to merge 2 sets of Object & Array like below

{
  exclude: ['placeholder'],
  attributes: { MYID : '' }
  map: 'input'
}

AND

{
 exclude: ['options'],
 attributes: { class: '', id:'', name:'', },
 map: '',
}

I tried using jQuery's $.extend function it worked but it only merge objects. And also tried with lodash js which also dose not work. I get output as

{
  exclude: ['options'],
  attributes: { class: '', id: '', name: '', MYID: '' },
  map: '',
}

I need output like

{
  exclude: ['options','placeholder'],
  attributes: { class: '', id: '', name: '', MYID: '' },
  map: '',
}

Code I tried using

$.extend(true,{
  exclude: ['placeholder'],
  attributes: { MYID : '' }
  map: 'input'
},{
 exclude: ['options'],
 attributes: { class: '', id:'', name:'', },
 map: '',
});

Use concat() to concatenate the "exclude" array, for-in loop to remap the "attributes", and "map" is always an empty string, so just keep it. — Ivan Kuckir
– Ivan Kuckir, Commented Aug 15, 2017 at 10:23

Nenad Vracar · Accepted Answer · 2017-08-15 10:34:22Z

2

You can create custom function for this using for...in loop and check type of each value.

var obj1 = {
  exclude: ['placeholder'],
  attributes: { MYID : '' },
  map: 'input'
}

var obj2 = {
 exclude: ['options'],
 attributes: { class: '', id:'', name:'', },
 map: '',
}


function merge(o1, o2) {
  for (var i in o2) {
    if (o1[i]) {
      if (typeof o2[i] == 'object') {
        if (Array.isArray(o2[i])) o1[i].push(...o2[i])
        else o1[i] = Object.assign({}, o1[i], o2[i])
      } else {
      	 o1[i] = o2[i]
      }
    } else {
      o1[i] = o2[i]
    }
  }
  return o1;
}


console.log(merge(obj1, obj2))

edited Aug 15, 2017 at 10:34

answered Aug 15, 2017 at 10:27

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

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

8 Comments

Varun Sridharan Over a year ago

Hi, Thanks for your answer. can i know why the function is not returning any values ? is it changing the original variable ?

Nenad Vracar Over a year ago

@Varun Sridharan Yes it's modifying first object

Varun Sridharan Over a year ago

thanks. but i need the function to return the value.

Nenad Vracar Over a year ago

You can just return first object then.

Nenad Vracar Over a year ago

@Varun Sridharan Yes as i said it will modify first object.

|

Artem · Accepted Answer · 2017-08-15 10:40:37Z

1

Because _.extend(...) overrides existing fields instead of fill it.

Try using _.mergeWith(,, customizer) with customizer function, that is responsible for merging fields the way is needed, like:

function customizer(initialObject, source) {
    if (_.isArray(initialObject)) {
        return initialObject.concat(source);
    } else if (_.isObject(initialObject)) {
        return _.extend(initialObject, source);
    } else {
        return source;
    }
}

_.mergeWith({a: [1], b: {c: 4}}, {a: [2, 3], b: {d: 5}}, customizer);

//{a: Array(3), b: {…}}
//a
//:
//(3) [1, 2, 3]
//b
//:
//{c: 4, d: 5}
//__proto__
//:
//Object

edited Aug 15, 2017 at 10:40

answered Aug 15, 2017 at 10:26

Artem

2,0671 gold badge15 silver badges19 bronze badges

2 Comments

Lennholm Over a year ago

OP is using jQuery, not lodash

Artem Over a year ago

He said he used lodash as well

Collectives™ on Stack Overflow

Merge 2 sets of Object + Array Using Javascript

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related