Merge 2 object with same key, value from 2 array

Question

I want to merge 2 object with same key, value from 2 array, something like this:

var arr1 = [
    { a: "a", 1: 1, 2: 2 },
    { a: "b", 1: 1, 2: 3 }
];

var arr2 = [
    { a: "a", 3: 123 },
    { a: "b", 3: 4411 }
];

var arr3 = _.map(arr1, function(a1) {
    var a3 = {};

    _.map(arr2, function(a2) {
        if (a1.a == a2.a) {
            a3 = _.extend(a1, a2);
        }
    })

    return a3
});

result:

arr3 = [ 
  { '1': 1, '2': 2, '3': 123, a: 'a' },
  { '1': 1, '2': 3, '3': 4411, a: 'b' } 
]

Does it look stupid? Are there any others ways to do this? Thanks for reading.

it worked, but i think there are some other better ways to do that with some library. (im not tested with big array length yet) — Bee
– Bee, Commented Sep 23, 2017 at 6:17
While posting question please be more specific. For example mention which JavaScript library you are used. It will help people to investigate on the similar kind of library your are used. — Vijayanath Viswanathan
– Vijayanath Viswanathan, Commented Sep 23, 2017 at 6:40
Possible duplicate of How to use Lodash to merge two collections based on a key? — Gruff Bunny
– Gruff Bunny, Commented Sep 23, 2017 at 8:07

Ori Drori · Accepted Answer · 2017-09-23 11:39:17Z

8

Use a lodash chain to concat the arrays, group similar objects, and then merge each group to a single object:

var arr1 = [{ a: "a", 1: 1, 2: 2 }, { a: "b", 1: 1, 2: 3 }];
var arr2 = [{ a: "a", 3: 123 }, { a: "b", 3: 4411 }];

var result = _(arr1)
  .concat(arr2) // concat the 2nd array
  .groupBy('a') // group by the identical key
  .map(_.spread(_.curry(_.merge, {}))) // left currey merge to to create a new empty object, and spread the group as parameters
  .value();
  
console.log(result);

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

With ES6 you can use Array#reduce to collect the similar objects in a Map, then get the Map#values iterator, and use the spread syntax to convert to an array:

const arr1 = [{ a: "a", 1: 1, 2: 2 }, { a: "b", 1: 1, 2: 3 }];
const arr2 = [{ a: "a", 3: 123 }, { a: "b", 3: 4411 }];

const result = [...arr1.concat(arr2) // concat the arrays
  .reduce((m, o) => m.set(o.a, Object.assign(m.get(o.a) || {}, o)), // use a map to collect similar objects
  new Map()
).values()]; // get the values iterator of the map, and spread into a new array
  
console.log(result);

edited Sep 23, 2017 at 11:39

answered Sep 23, 2017 at 11:32

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

4 Comments

Ajinkya Over a year ago

Lodash way is working. ES6 version is not working though.

Ori Drori Over a year ago

@Ajinkya - have you tried running the snippets? If so, what browser are you using?

Ajinkya Over a year ago

My bad. I did not replace property 'a' for es6 snippet. Both the snippets are working. Which one do you recommend to use considering the performance?

Ori Drori Over a year ago

@Ajinkya - I don't really know to tell you the truth. If the amount of items is small, it doesn't really matter. If the amount is huge, you should with lodash, since spread is not stack safe. You'll need to profile it.

marvel308 · Accepted Answer · 2017-09-23 06:28:40Z

4

you can do

var arr1 = [
    { a: "a", 1: 1, 2: 2 },
    { a: "b", 1: 1, 2: 3 }
];

var arr2 = [
    { a: "a", 3: 123 },
    { a: "b", 3: 4411 }
];

let result = arr1.map((e) => {
    for(let element of arr2){
        if(e.a == element.a) Object.assign(e, element);
    }
    return e;
});
console.log(result);

answered Sep 23, 2017 at 6:28

marvel308

10.5k3 gold badges24 silver badges32 bronze badges

Collectives™ on Stack Overflow

Merge 2 object with same key, value from 2 array

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related