spread operator converting objects to array

Question

I'm trying to convert a data structure like this:

data = { 
  0:{A:a}, 
  1:{B:b}, 
  2:{C:c}, 
}

into a structure like this:

[
 {0:{A:a}},
 {1:{B:b}}, 
 {2:{C:c}},
]

Using the spread operator like this: [...data] returns any empty array.

I also tried [{...data}]

Is there a way to use the spread operator to get the desired result? Also, why doesn't this approach work?

are the numeric keys related to the indices of the array? – Nina Scholz Jul 24 '17 at 16:40 — Nina Scholz, Jul 24 '17 at 16:40

mhodges · Accepted Answer · 2019-12-30T17:39:07.093

22

"Is there a way to use the spread operator to get the desired result?" Short answer, no. (see below for alternate solution to what you're trying to accomplish)

"Also, why doesn't this approach work?"

It doesn't work because according to the MDN docs

"The Rest/Spread Properties for ECMAScript proposal (stage 3) adds spread properties to object literals. It copies own enumerable properties from a provided object onto a new object."

Like the docs say, according to the "Rest/Spread Properties proposal", you can't spread object properties onto an array, objects will always spread their properties onto a new object. Likewise, arrays will not spread onto an object, they will only spread onto a new array.

Alternative solution:

You can do this fairly easily with Object.keys().map(). Object.keys() will get an array of the keys of the object, and Array.map() will map them into an array of the desired structure, like so:

var data = { 
  0:{A:"a"}, 
  1:{B:"b"}, 
  2:{C:"c"}, 
}

var result = Object.keys(data).map(function (key) {
   return { [key]: data[key] };
});
console.log(result);

edited Dec 30 '19 at 17:39

answered Jul 24 '17 at 16:13

mhodges

10,938
2
28
46

this is not what's going on nor is this the correct answer – Christian Matthew Dec 29 '19 at 15:42
your answer is literally correct but it doesn't explain anything the OP asked. He was inquiring why the spread operator did not work. If you can explain that in your answer I would revote your answer to correct. – Christian Matthew Dec 30 '19 at 17:04
@ChristianMatthew "Why doesn't this code work?" Is not an on-topic question. The real question was "Is there a way to use the spread operator to get the desired result?" And the answer was a resounding "no". To be more helpful, everyone provided alternate solutions to accomplish the same goal. I did, however, go above and beyond and address "why the spread operator didn't work in this case?". The OP is trying to spread an object onto an *array*, when the docs (that I referenced) clearly state that objects spread onto a *new object* not an array. Not sure what else you're looking for? – mhodges Dec 30 '19 at 17:14
i singled yours out because it was marked as correct and it adds to the confusion that this somehow is the correct response to what the OP asked. Perhaps the OP's question was really how do I do this and again your answer correct but then his post needs edited to reflect that. Either way, me coming upon this answer I found these issues with what the OP asked and how people are trying to answer it. It's not informative and it could have been – Christian Matthew Dec 30 '19 at 17:27
@ChristianMatthew Edited for clarity. In the future, it would be more beneficial for you to ask for elaboration or clarification of something in the post, rather than saying "this is not what's going on nor is this the correct answer", both of which are patently false statements, and neither of which are asking for what you need, which is a clear answer regarding the OP's question. – mhodges Dec 30 '19 at 17:48
1

That is fair and I will make sure to do that for the next time. Thanks for the edit. – Christian Matthew Dec 30 '19 at 18:21

Ori Drori · Answer 2 · 2018-10-17T23:53:59.893

8

You can use Object.entries to get [key, value] pairs, and map them to an array of objects using computed property names:

const data = { 
  0:{A: 'a'}, 
  1:{B: 'b'}, 
  2:{C: 'c'}
};

const result = Object.entries(data).map(([key, value]) => ({ [key]: value }));

console.log(result);

edited Oct 17 '18 at 23:53

answered Jul 24 '17 at 16:32

Ori Drori

183,571
29
224
209

score 1 · Answer 3 · answered Jul 24 '17 at 16:11

1

I'm afraid you cant use to spread operator like in your example, however you can produce the desired output with reduce.

data = { 
  0:{A:'a'}, 
  1:{B:'b'}, 
  2:{C:'c'}, 
}

let resArr = Object.keys(data).reduce((arr, e) => {
  arr.push({[e]: data[e]});
  return arr;
}, []);

console.log(resArr);

answered Jul 24 '17 at 16:11

Olian04

6,480
2
27
54

2

This gives the literal property "e" for each object. You need to add the property dynamically using bracket syntax to get the correct property name - `arr.push({ [e]: data[e] });` – mhodges Jul 24 '17 at 16:15

score -3 · Answer 4 · answered Oct 07 '22 at 15:27

-3

let data = ['Uzbek sila', 'Hikmatbet', 'Aslamboi']

let spread = [...data]

console.log(spread)

answered Oct 07 '22 at 15:27

scorpius

1

2

I think this guy is the best programmer in the world – scorpius Oct 07 '22 at 15:29
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 11 '22 at 13:57

spread operator converting objects to array

4 Answers4

Linked