javascript merge two objects by key name

Question

Say I have the following two objects:

var a = {
  "abc": {
    "111": {
       name: "jon"
    }
  },
  "xyz": {
    "222": {
       name: "bill"
    }
  }
}

var b = {
  "xyz": {
    "333": {
       name: "mary"
    }
  }
}

I then want to create a new object to merge the two by the top level key name. So to get something like this:

var c = {
  "abc": {
    "111": {
       name: "jon"
    }
  },
  "xyz": {
    "222": {
       name: "bill"
    },
    "333": {
       name: "mary"
    }
  }
}

I imagine it's probably something you do with .map(), .each(), or .reduce()? Would jQuery be helpful in this case? if so how?

@CodeManiac, I actually think it's not needed, but perhaps I am unaware of some jQuery function that would save time. Just wanted to mention it because I use jQuery. — Ben
– Ben, Commented Sep 30, 2019 at 18:23
This can be simply achieved with native JS, if you're using loadash then you can expect already built function for such cases, but IMO there's no need of using a complete library where as you can do it just simple loops, If you're already using then it's fine, let me see if there's any such function available in jQuery — Code Maniac
– Code Maniac, Commented Sep 30, 2019 at 18:25
There are two function extend and merge but none of them can be used directly for such case, you need to loop through the keys and than merge them — Code Maniac
– Code Maniac, Commented Sep 30, 2019 at 18:33

amrender singh · Accepted Answer · 2019-10-25 10:01:41Z

4

You can simply use Object.entries() and Array.reduce(),

The main idea is to iterate over both the arrays and maintain a map.

Iterate over the first object and create a map of all of its properties.
Than iterate over the second object, and for each of its properties check if it is present in map or not, if it is present than merge the two, If not than simply add it.

var a = { "abc": { "111": { name: "jon" } }, "xyz": { "222": { name: "bill" } } }
var b = { "xyz": { "333": { name: "mary" } } };

let result = Object.entries(a).reduce((acc,[key, value]) => (acc[key] = value,acc),{});
Object.entries(b).reduce((acc,[key, value]) => (acc[key] =acc[key] && Object.assign(acc[key], value)|| value,acc),result);

console.log(result);

In case you can use one of your existing objects than a simple solution can be:

var a = { "abc": { "111": { name: "jon" } }, "xyz": { "222": { name: "bill" } } }
var b = { "xyz": { "333": { name: "mary" } } };

Object.entries(a).forEach(([key, value])=>{
  b[key] = Object.assign(b[key] || {}, value);
});

console.log(b);

edited Oct 25, 2019 at 10:01

answered Sep 30, 2019 at 18:26

amrender singh

8,2594 gold badges27 silver badges30 bronze badges

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

1 Comment

Calvin Nunes Over a year ago

I'm upvoting since this answers the question and is a clean solution, but it would be great to see some explanation on why this code solves the question (since the code is very reduced, it turns out hard to understand by just reading the code)

3limin4t0r · Accepted Answer · 2019-09-30 19:49:36Z

2

If you're already using jQuery or Lodash in your project you can use $.extend or _.merge respectively. There is no need to reinvent the wheel when you're already using one of those libraries.

var a = { "abc": { "111": { name: "jon" } }, "xyz": { "222": { name: "bill" } } };
var b = { "xyz": { "333": { name: "mary" } } };

console.log($.extend(true, {}, a, b));
console.log(_.merge({}, a, b));
console.log("a =", a);
console.log("b =", b);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

edited Sep 30, 2019 at 19:49

answered Sep 30, 2019 at 19:16

3limin4t0r

21.4k3 gold badges38 silver badges61 bronze badges

2 Comments

Ben Over a year ago

I can only accept one answer, but this answer is also correct and useful.

3limin4t0r Over a year ago

@Ben np, upvoting is enough to mark an answer as helpful.

Bryan Dellinger · Accepted Answer · 2019-09-30 18:52:38Z

0

could you use the es6 object destructuring?

var a = {
  "abc": {
    "111": {
       name: "jon"
    }
  },
  "xyz": {
    "222": {
       name: "bill"
    }
  }
}

var b = {
  "xyz": {
    "333": {
       name: "mary"
    }
  }
}

   const c = {abc: a.abc, xyz: [a.xyz, b.xyz]};
    console.log(c);

answered Sep 30, 2019 at 18:52

Bryan Dellinger

5,43210 gold badges40 silver badges90 bronze badges

Collectives™ on Stack Overflow

javascript merge two objects by key name

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related