Add object to the beginning of array using spread operator

Question

I have an array like this:

var oldArray = [{'value': '1', 'label': 'a'}, {'value': '2', 'label': 'b'}]

what I want is using spread operator add a new object at the beginning of that array:

BTW this works:

var oldArray = [{'value': '1', 'label': 'a'}, {'value': '2', 'label': 'b'}]
var newObj = {'value': 'all', 'label': 'all'}
var result = [newObj, ...oldArray]

But generates a key "newObj" like this:

var oldArray = [newObj : {'value': 'all', 'label': 'all'}, 0: {'value': '1', 'label': 'a'}, 1:{'value': '2', 'label': 'b'}]

And I want the key to be auto generated like if I do this:

var result = [{'value': 'all', 'label': 'all'}, ...oldArray]

And imagine the result is this:

var oldArray = [newObj : {0: 'all', 'label': 'all'}, 1: {'value': '1', 'label': 'a'}, 2:{'value': '2', 'label': 'b'}]

but that gives me an error.

Right now I'm using unshift and it works, I wonder if there's a way to do the same with spread operator.

Can you not just use [`unshift()`](https://www.w3schools.com/jsref/jsref_unshift.asp)? — George, Apr 28 '17 at 14:38
your answer here: http://stackoverflow.com/questions/8073673/how-can-i-add-new-array-elements-at-the-beginning-of-an-array-in-javascript — taile, Apr 28 '17 at 14:42
`var result = [newObj, ...oldArray]` also gives the correct output. am i missing something ? — Abhinav Galodha, Apr 28 '17 at 14:43
So many answers suggesting unshift but that is not what you asked. `var result = [newObj, ...oldArray]` _does_ work and is the right answer, the problem is you have a false premise in your question... — Aluan Haddad, Apr 28 '17 at 14:54
@AluanHaddad I've said that var result = [newObj, ...oldArray] works and unshift works is what I've used. But I'm using a drop down library that takes the resulting array to generate the drop down, and result = [newObj, ...oldArray] generates a key value that brokes the library. I've corrected the question removing the false premise. — Diego Unanue, Apr 30 '17 at 03:58

score 11 · Answer 1 · answered Aug 26 '20 at 16:26

11

I'm a little late but

You can solve this problem modifying it like this with spreed:

change:

var result = [newObj, ...oldArray]

for:

var result = [{...newObj}, ...oldArray]

answered Aug 26 '20 at 16:26

Reyes Richard

109
1
3

it will show `[{}, oldArray]` if newObj is empty. – w3debugger Aug 26 '22 at 13:55

AP. · Answer 2 · 2017-04-28T14:46:09.233

4

You could use the unshift() function which does exactly that:

let oldArray = [{'value': '1', 'label': 'a'}, {'value': '2', 'label': 'b'}]
let newObj = {'value': 'all', 'label': 'all'}
oldArray.unshift(newObj)

console.log(oldArray)

Or if you don't want to modify the original array, you can do:

const result = oldArray.slice()
result.unshift(newObj)
console.log(result)

edited Apr 28 '17 at 14:46

answered Apr 28 '17 at 14:40

AP.

8,082
2
24
33

What is wrong with the `unshift()`? It seems to work as shown in George's code snippet in his answer below. Why the -1? Is there a drawback to using unshift? (Edit:) oh, because it's not using the spread operator as mentioned in the question? – Michael S Apr 28 '17 at 15:42
2

@downvoter Could've mentioned that w/o the downvote... SO becomes a more hostile site day by day. – AP. Apr 28 '17 at 21:44
You did not answer the question asked. – Aluan Haddad Apr 28 '17 at 23:46
2

@AP. Yes, SO/SE are known to be very hostile, everywhere on the Internet people talk about the negativity here. I agree. Downvoting, downvoting, downvoting, sometimes for nothing. – Quidam May 03 '17 at 17:19

score 1 · Answer 3 · answered Apr 28 '17 at 14:40

1

You can use unshift() to add items to the beginning of an array

var oldArray = [{'value': '1', 'label': 'a'}, {'value': '2', 'label': 'b'}]
var newObj = {'value': 'all', 'label': 'all'}
oldArray.unshift(newObj);

console.log(oldArray);

answered Apr 28 '17 at 14:40

George

6,630
2
29
36

Add object to the beginning of array using spread operator

3 Answers3