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"
    }
]

Does this answer your question? [How to merge two arrays in JavaScript and de-duplicate items](https://stackoverflow.com/questions/1584370/how-to-merge-two-arrays-in-javascript-and-de-duplicate-items) — , Jun 24 '20 at 17:45

score 2 · Answer 1 · answered Jun 24 '20 at 17:45

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)
)

answered Jun 24 '20 at 17:45

richytong

2,387
1
10
21

2

[this question](https://stackoverflow.com/questions/48865710/spread-operator-vs-array-concat) has some general guidelines when using rest spread vs concat – richytong Jun 24 '20 at 17:51

score 2 · Answer 2 · answered Jun 24 '20 at 17:45

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);

concat is better here, see [this question](https://stackoverflow.com/questions/48865710/spread-operator-vs-array-concat) — richytong, Jun 24 '20 at 17:47

score 2 · Accepted Answer · 2020-06-24T17:52:07.857

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)

score 1 · Answer 4 · answered Jun 24 '20 at 17:49

1

Try this .concat. parentArr.concat(growthArr)

answered Jun 24 '20 at 17:49

bad_kotya

114
2

score 1 · Answer 5 · answered Jun 24 '20 at 17:50

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))

score 1 · Answer 6 · answered Jun 24 '20 at 17:57

1

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

answered Jun 24 '20 at 17:57

user

11
1

1

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. – Jun 24 '20 at 18:02

score 0 · Answer 7 · answered Jun 24 '20 at 17:45

0

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

parentArr.concat(growthArr);

answered Jun 24 '20 at 17:45

classydraught

352
1
4
13

`.concat()` doesn't mutate the original array. – Jun 24 '20 at 17:49
In that case you can simply go with spread operator @slappy – classydraught Jun 24 '20 at 17:51

score 0 · Answer 8 · answered Jun 24 '20 at 17:47

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'
  }];
}

score 0 · Answer 9 · answered Jun 24 '20 at 17:47

0

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

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

answered Jun 24 '20 at 17:47

Dimitri L.

4,499
1
15
19

JavaScript - Combining an array with an existing array

9 Answers9