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.

var result = [newObj, ...oldArray] also gives the correct output. am i missing something ? — Abhinav Galodha
– Abhinav Galodha, Commented Apr 28, 2017 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
– Aluan Haddad, Commented Apr 28, 2017 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
– Diego Unanue, Commented Apr 30, 2017 at 3:58

Dale K · Accepted Answer · 2025-02-02 21:06:57Z

11

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

change:

var result = [newObj, ...oldArray]

to:

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

edited Feb 2 at 21:06

Dale K

28.1k15 gold badges59 silver badges85 bronze badges

answered Aug 26, 2020 at 16:26

Reyes Richard

1091 silver badge3 bronze badges

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

1 Comment

w3debugger Over a year ago

it will show [{}, oldArray] if newObj is empty.

AP. · Accepted Answer · 2017-04-28 14:46:09Z

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, 2017 at 14:46

answered Apr 28, 2017 at 14:40

AP.

9,0112 gold badges28 silver badges36 bronze badges

4 Comments

Michael S Over a year ago

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?

AP. Over a year ago

@downvoter Could've mentioned that w/o the downvote... SO becomes a more hostile site day by day.

Aluan Haddad Over a year ago

You did not answer the question asked.

Quidam Over a year ago

@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.

George · Accepted Answer · 2017-04-28 14:40:56Z

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, 2017 at 14:40

George

6,7592 gold badges31 silver badges36 bronze badges

Collectives™ on Stack Overflow

Add object to the beginning of array using spread operator

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related