19

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?

1
  • are the numeric keys related to the indices of the array? Commented Jul 24, 2017 at 16:40

4 Answers 4

23

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

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

6 Comments

this is not what's going on nor is this the correct answer
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.
@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?
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
That is fair and I will make sure to do that for the next time. Thanks for the edit.
|
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);

Comments

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

1 Comment

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] });
-3

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

let spread = [...data]

console.log(spread)

2 Comments

I think this guy is the best programmer in the world
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.