Object assign to merge 2 array of object and keep self property

Question

I try to merge 2 array of objects using Object assign. I know I can do this with map by comparing their ids, but somehow didn't worked in object.assign?

const ageArr = [{
  "id": 1,
  "age_range": "0 - 10 Years old",
  "value": 1
}, {
  "id": 2,
  "age_range": "11 - 20 Years old",
  "value": 1
}, {
  "id": 3,
  "age_range": "21 - 30 Years old",
  "value": 78
}]

const colorArr = [{
  "id": 1,
  "color": "#333"
}, {
  "id": 2,
  "color": "#666"
}, {
  "id": 3,
  "color": "#999"
}]

const mergedArr = Object.assign({}, ageArr, colorArr)
console.log(mergedArr)

https://jsfiddle.net/u6L2ceux

are the arrays ordered, that the id is always corresponding to the object with the same index? — Nina Scholz
– Nina Scholz, Commented Aug 11, 2017 at 8:41
@NinaScholz it doesn't matter right? as long as the ids of 2 arrays matched — Jessie Anderson
– Jessie Anderson, Commented Aug 11, 2017 at 8:43
Object assign does different thing, it makes prototype inheritance of Objects, not arrays. — zb'
– zb', Commented Aug 11, 2017 at 8:43
@zb' I think you were confusing that with Object.create. And no, your fiddle shows that Object.assign returns its first argument - Parent === Child. — Bergi
– Bergi, Commented Aug 11, 2017 at 9:01

Nina Scholz · Accepted Answer · 2017-08-11 09:19:50Z

2

You could use Map and two loops.

const
    ageArr = [{ id: 1, age_range: "0 - 10 Years old", value: 1 }, { id: 2, age_range: "11 - 20 Years old", value: 1 }, { id: 3, age_range: "21 - 30 Years old", value: 78 }],
    colorArr = [{ id: 1, color: "#333" }, { id: 2, color: "#666" }, { id: 3, color: "#999" }],
    map = new Map(ageArr.map(o => [o.id, o])),
    mergedArr = colorArr.map(o => Object.assign({}, o, map.get(o.id) || {}));

console.log(mergedArr);

.as-console-wrapper { max-height: 100% !important; top: 0; }

For not same array length, you could collect first all objects with the same id in the map and render then result.

var ageArr = [{ id: 1, age_range: "0 - 10 Years old", value: 1 }, { id: 2, age_range: "11 - 20 Years old", value: 1 }],
    colorArr = [{ id: 2, color: "#666" }, { id: 3, color: "#999" }],
    map = new Map,
    result;

[ageArr, colorArr].forEach(a =>
    a.forEach(o => map.set(o.id, Object.assign(map.get(o.id) || {}, o)))
);
result = [...map.values()];

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

edited Aug 11, 2017 at 9:19

answered Aug 11, 2017 at 8:45

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

5 Comments

Jessie Anderson Over a year ago

hmm this is too complicated, do you have a more simple solution?

Nina Scholz Over a year ago

what means simple? a solution with more lines and an object for the reference to the same id?

Jessie Anderson Over a year ago

jsfiddle.net/r8jdqe1k this is simple, but it might break if the ageArr has 4 items.

Nina Scholz Over a year ago

using find is a solution as well, but on large arrays it could take more time.

Jessie Anderson Over a year ago

but how to solve the error if the item is not the same length?

Mihai Alexandru-Ionut · Accepted Answer · 2017-08-11 08:54:00Z

1

You can do this using map method in combination with Object.assign

const ageArr = [{
  "id": 1,
  "age_range": "0 - 10 Years old",
  "value": 1
}, {
  "id": 2,
  "age_range": "11 - 20 Years old",
  "value": 1
}, {
  "id": 3,
  "age_range": "21 - 30 Years old",
  "value": 78
}]

const colorArr = [{
  "id": 1,
  "color": "#333"
}, {
  "id": 2,
  "color": "#666"
}, {
  "id": 3,
  "color": "#999"
}]

const mergedArr = colorArr.map((item,i)=>Object.assign({},item,ageArr[i]));
console.log(mergedArr)

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

edited Aug 11, 2017 at 8:54

answered Aug 11, 2017 at 8:43

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

2 Comments

Jessie Anderson Over a year ago

I know this but avoid it coz we don't use jquery.

Mihai Alexandru-Ionut Over a year ago

@JessieAnderson, have a look now. I try map with Object.assign..solution in one line.

Bergi · Accepted Answer · 2017-08-11 08:53:39Z

0

Object.assign does not recursively merge objects. It just does shallow copies of object properties. In your case, it copies the values of the properties 0, 1 and 2 from colorArr to the empty object.

Instead use a loop over your arrays and Object.assign to merge the individual items:

const mergedArr = [];
for (let i=0; i<Math.min(ageArr.length, colorArr.length); i++) {
    assert(ageArr[i].id === colorArr[i].id); // if they don't match you need to do a lookup
    mergedArr[i] = Object.assign({}, ageArr[i], colorArr[i]);
}

answered Aug 11, 2017 at 8:53

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Comments

Kevin Vujic · Accepted Answer · 2017-08-11 08:46:44Z

-2

In case you just want to add both arrays into one you could try this:

const ageArr = [{
  "id": 1,
  "age_range": "0 - 10 Years old",
  "value": 1
}, {
  "id": 2,
  "age_range": "11 - 20 Years old",
  "value": 1
}, {
  "id": 3,
  "age_range": "21 - 30 Years old",
  "value": 78
}]

const colorArr = [{
  "id": 1,
  "color": "#333"
}, {
  "id": 2,
  "color": "#666"
}, {
  "id": 3,
  "color": "#999"
}]

const mergedArr = ageArr.concat(colorArr)
console.log(mergedArr)

Remember that the concat function does return a new array and doesnt make any changes to any other array. Meaning colorArr and ageArr are unchanged after the concat() call.

Take a look at the documentation: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

answered Aug 11, 2017 at 8:46

Kevin Vujic

73 bronze badges

1 Comment

Jessie Anderson Over a year ago

this is not what I want.

Collectives™ on Stack Overflow

Object assign to merge 2 array of object and keep self property

4 Answers 4

5 Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related