How to recursively merge 2 javascript objects?

Question

I have 2 objects that I need to merge and keep all properties in tact, tried with jQuery $.extend but I cant get it to work . I tried all posts with how to merge javascript objects but simply cant get this to work.

var thz_icon_source = {"Spinners":["spinnericon1","spinnericon2"],"Awesome":["awesomeicon1","awesomeicon2"]};
var fa_icon_source = {"Spinners":["faspinner1","faspinner2"],"Awesome":["faawesome1","faawesome2"]};
var new_source ={};
$.extend(new_source,fa_icon_source,thz_icon_source);

console.log(thz_icon_source);
console.log(fa_icon_source);
console.log(new_source);

desired output should be like

{
"Spinners":["faspinner1","faspinner2","spinnericon1","spinnericon2"],
"Awesome":["faawesome1","faawesome2","awesomeicon1","awesomeicon2"]
}

This post Merge two json/javascript arrays in to one array has a simple object mine is not same as that one.

$.extend can't do that as it will overwrite properties it finds if $.extend is passed with the deep parameter set to true. If used the way you have used it, it will ignore properties if they already exist in the target object. — papiro
– papiro, Commented Sep 25, 2015 at 23:57
@papiro yes noticed that extend and merge cant help me there , seems like I need to loop and push in new one — Benn
– Benn, Commented Sep 25, 2015 at 23:58
possible duplicate of Merge two json/javascript arrays in to one array — aug
– aug, Commented Sep 26, 2015 at 0:04
@aug not it is not , I tried that one to , it is using concat which cant help me with my objects — Benn
– Benn, Commented Sep 26, 2015 at 0:06
@aug how about you try the code before you mark as duplicate. it is not the same object structure. — Benn
– Benn, Commented Sep 26, 2015 at 0:10

Diptox · Accepted Answer · 2015-09-26 00:03:18Z

5

Demo

function mergeJSON(json1,json2)
{
    var result = json1 ;
    for (var prop in json2) 
    {
        if (json2.hasOwnProperty(prop)) 
        {
            result[prop] = result[prop].concat(json2[prop]);
        }
    }
    return result;
}

answered Sep 26, 2015 at 0:03

Diptox

1,80912 silver badges20 bronze badges

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

1 Comment

Benn Over a year ago

Right on the money! nailed it!

Barmar · Accepted Answer · 2015-09-26 00:03:28Z

$.extend merges in missing properties, it doesn't combine the properties that are in common. You need to write a loop.

var thz_icon_source = {
  "Spinners": ["spinnericon1", "spinnericon2"],
  "Awesome": ["awesomeicon1", "awesomeicon2"]
};
var fa_icon_source = {
  "Spinners": ["faspinner1", "faspinner2"],
  "Awesome": ["faawesome1", "faawesome2"]
};
var new_source = {};
// First add in the new elements from thz_icon_source
$.extend(new_source, fa_icon_source, thz_icon_source);
// Now merge the common elements
$.each(fa_icon_source, function(k, e) {
  if (thz_icon_source.hasOwnProperty(k)) {
    new_source[k] = e.concat(thz_icon_source[k]);
  }
});

console.log(thz_icon_source);
console.log(fa_icon_source);
console.log(new_source);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

baao · Accepted Answer · 2015-09-26 00:19:28Z

You can use this prototype to merge 2 or more objects the way you want it:

Object.prototype.assignDeep = function() {
    var self = this;
    Object.keys(arguments).forEach(obj => {
        Object.keys(self).forEach(val => {
            if (arguments[obj].hasOwnProperty(val)) {
                var tmp = arguments[obj][val] instanceof Array ? arguments[obj][val] : [arguments[obj][val]];
                self[val] = self[val].concat(tmp);
            }  
        });
    });
    return self;
}
    
    
    
var thz_icon_source = {"Spinners":["spinnericon1","spinnericon2"],"Awesome":["awesomeicon1","awesomeicon2"]};
var fa_icon_source = {"Spinners":["faspinner1","faspinner2"],"Awesome":["faawesome1","faawesome2"]};
var b = thz_icon_source.assignDeep(fa_icon_source);
console.log(b);

StackSlave · Accepted Answer · 2015-09-26 00:36:36Z

0

You should use a loops with .concat():

function objectConcatArrays(){
  var a = arguments, o = {};
  for(var i=0,l=a.length; i<l; i++){
    for(var p in a[i]){
      if(p in o){
        o[p] = o[p].concat(a[i][p]);
      }
      else{
        o[p] = a[i][p];
      }
    }
  }
  return o;
}
var thz_icon_source = {"Spinners":["spinnericon1","spinnericon2"],"Awesome":["awesomeicon1","awesomeicon2"]};
var fa_icon_source = {"Spinners":["faspinner1","faspinner2"],"Awesome":["faawesome1","faawesome2"]};
var res = objectConcatArrays(thz_icon_source, fa_icon_source);
console.log(res);

Each argument represents an Object of Arrays. Add more if you want.

edited Sep 26, 2015 at 0:36

answered Sep 26, 2015 at 0:10

StackSlave

10.6k2 gold badges20 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to recursively merge 2 javascript objects?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related