JavaScript - Combining an array with an existing array

Question

I'm attempting to combine my two array, but move only the object.

I have an array called parentArr that I am attempting to combine with growthArr. When using the .push() method it is returning parentArr as an array inside of growthArr. I am attempting to combine the objects from parentArr and not have it nested inside of an array.

Here is an example of what is happening:

let growthArr = [
 {
 name: 'online stores',
 parent: 'high'
 }, {
 name: 'retail stores',
 parent: 'low'
 }, {
 name: 'walk in',
 parent: 'high'
 }
 ]
 
 
 let parentArr = [
 {
 id: 'low',
 color: '#fafafa'
 }, {
 id: 'med-low',
 color: '#B62721'
 }, {
 id: 'med',
 color: '#FF5733'
 }, {
 id: 'med-high',
 color: '#FF33FC'
 }, {
 id: 'high',
 color: '#33FF64'
 }
 ]
 
 
 growthArr.push(parentArr)
 
 
 console.log(growthArr)

To work around this, I've tried doing growthArr.push.apply(parentArr) but by doing this my parentArr does not show at all.

Here is my expected outcome, an array with both the objects in growthArr and parentArr

[
 {
 "name": "online stores",
 "parent": "high"
 },
 {
 "name": "retail stores",
 "parent": "low"
 },
 {
 "name": "walk in",
 "parent": "high"
 },
 {
 "id": "low",
 "color": "#fafafa"
 },
 {
 "id": "med-low",
 "color": "#B62721"
 },
 {
 "id": "med",
 "color": "#FF5733"
 },
 {
 "id": "med-high",
 "color": "#FF33FC"
 },
 {
 "id": "high",
 "color": "#33FF64"
 }
]

• user796446: Does this answer your question? How to merge two arrays in JavaScript and de-duplicate items

Answer 1

Use the ... syntax with .push()

growthArr.push(...parentArr)

---

This works because .push() takes any number of arguments, and pushes them all into the targeted array.

Note: This mutates the original array without creating a new one and overwriting it. This can be important if there are other references to the array that need to observe the mutation.

---

FYI, your attempt would have worked:

growthArr.push.apply(parentArr)

Except that .apply expects the first argument to be the this value (the targeted array). So you'd need this:

growthArr.push.apply(growthArr, parentArr)

Answer 2

concat is what you want to use.

let growthArr = [{
 name: 'online stores',
 parent: 'high'
}, {
 name: 'retail stores',
 parent: 'low'
 }, {
 name: 'walk in',
 parent: 'high'
}]
 
 
let parentArr = [{
 id: 'low',
 color: '#fafafa'
}, {
 id: 'med-low',
 color: '#B62721'
 }, {
 id: 'med',
 color: '#FF5733'
}, {
 id: 'med-high',
 color: '#FF33FC'
}, {
 id: 'high',
 color: '#33FF64'
}]
console.log(
 growthArr.concat(parentArr)
)

• richytong: this question has some general guidelines when using rest spread vs concat

Answer 3

Use ...array for the values of an array.

let growthArr = [{
 name: 'online stores',
 parent: 'high'
}, {
 name: 'retail stores',
 parent: 'low'
}, {
 name: 'walk in',
 parent: 'high'
}];
let parentArr = [{
 id: 'low',
 color: '#fafafa'
}, {
 id: 'med-low',
 color: '#B62721'
}, {
 id: 'med',
 color: '#FF5733'
}, {
 id: 'med-high',
 color: '#FF33FC'
}, {
 id: 'high',
 color: '#33FF64'
}];
growthArr = [...growthArr, ...parentArr];
console.log(growthArr);

• richytong: concat is better here, see this question

Answer 4

Try this .concat. parentArr.concat(growthArr)

Answer 5

You have to use **concat** instead of push

let growthArr = [
 {
 name: 'online stores',
 parent: 'high'
 }, {
 name: 'retail stores',
 parent: 'low'
 }, {
 name: 'walk in',
 parent: 'high'
 }
 ]
 
 
 let parentArr = [
 {
 id: 'low',
 color: '#fafafa'
 }, {
 id: 'med-low',
 color: '#B62721'
 }, {
 id: 'med',
 color: '#FF5733'
 }, {
 id: 'med-high',
 color: '#FF33FC'
 }, {
 id: 'high',
 color: '#33FF64'
 }
 ]
 console.info(growthArr.concat(parentArr))

Answer 6

Use parentArr.concat(growthArr).
JS can be as simple as that!

• user12407908: Just like all the other answers that gave the same solution, you're not mutating the original array. You'd need to overwrite the original reference, and potentially all of them.

Answer 7

Use array concat() method. So the syntax would be

parentArr.concat(growthArr);

• user12407908: .concat() doesn't mutate the original array.
• classydraught: In that case you can simply go with spread operator @slappy

Answer 8

All you need for this is the handy spread syntax

const
 growthArr = getGrowthArr(),
 parentArr = getParentArr();
growthArr.push(...parentArr);
console.log(growthArr);
function getGrowthArr() {
 return [{
 name: 'online stores',
 parent: 'high'
 }, {
 name: 'retail stores',
 parent: 'low'
 }, {
 name: 'walk in',
 parent: 'high'
 }];
}
function getParentArr() {
 return [{
 id: 'low',
 color: '#fafafa'
 }, {
 id: 'med-low',
 color: '#B62721'
 }, {
 id: 'med',
 color: '#FF5733'
 }, {
 id: 'med-high',
 color: '#FF33FC'
 }, {
 id: 'high',
 color: '#33FF64'
 }];
}

Answer 9

This can also be done with destructuring in es6 while creating a new array:

const combined = [...growthArr, ...parentArr];