CODEWITHSUNDEEP
javascriptarraysobjectecmascript-6spread-syntax
Turnipdabeets
Turnipdabeets

Reputation: 6005

spread operator converting objects to array

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?

Upvotes: 19

Views: 27238

Answers (4)

scorpius
scorpius

Reputation: 21

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

let spread = [...data]

console.log(spread)

Upvotes: -3

mhodges
mhodges

Reputation: 11116

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

Upvotes: 23

Ori Drori
Ori Drori

Reputation: 191936

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

Upvotes: 8

Olian04
Olian04

Reputation: 6872

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

Upvotes: 1

Related Questions