Transform a javascript array of object to an array of array

Question

I am looking an elegant way in ES6 to transform this array:

var src = [{x:1,y:'a'},{x:2,y:'b'}];

To this array:

var desc = [[1,2],["a","b"]];

Which contains an array of all the properties and one array for all the values.

For this, i have written this code:

var src = [{x:1,y:'a'},{x:2,y:'b'}];

var prop1 = [];
var prop2 = [];

src.forEach(item => {
    prop1.push(item.x)
    prop2.push(item.y);
});

var desc = [prop1, prop2];

It works fine but it is quite long, so I am looking for an eventual improvement and a short code.

Possible duplicate of From an array of objects, extract value of a property as array — Lars Beck
– Lars Beck, Commented Apr 9, 2018 at 12:29
Actually I would keep it as you have it. It is very readable and you dont have to think about "what would be the output". Having everything in one line does not necessarily mean that it is better or "more clever"... — libik
– libik, Commented Apr 9, 2018 at 12:30

Yury Tarabanko · Accepted Answer · 2018-04-09 12:42:42Z

5

You name the props order (because the order of keys in object is not guaranteed) and then map over src array by extracting correspondend prop value.

var src = [{x:1,y:'a'},{x:2,y:'b'}]

var props = ['x', 'y'];

var result = props.map(prop => src.map(x => x[prop]))

console.log(result)

edited Apr 9, 2018 at 12:42

answered Apr 9, 2018 at 12:27

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

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

3 Comments

Mohammad Usman Over a year ago

Nice one. However could be more cool if props = Object.keys(src[0]) instead of hard coded values.

Yury Tarabanko Over a year ago

@MohammadUsman Not really. The order of keys is not guaranteed.

Mohammad Usman Over a year ago

Yes, you are right. I forgot about order in this case.

Mohammad Usman · Accepted Answer · 2018-04-09 12:33:56Z

3

You can use .reduce():

let src = [{x: 1, y: 'a'}, {x:2, y: 'b'}];

let result = src.reduce((a, c) => (a[0].push(c.x), a[1].push(c.y), a), [[], []]);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Docs:

edited Apr 9, 2018 at 12:33

answered Apr 9, 2018 at 12:28

Mohammad Usman

39.6k20 gold badges99 silver badges101 bronze badges

Comments

Nina Scholz · Accepted Answer · 2018-04-09 12:27:10Z

1

You could iterate the array and then by the keys of the object and switch the outer and inner indices the target element.

var src = [{ x: 1, y: 'a' }, { x: 2, y: 'b' }],
    desc = [];

src.forEach(o => Object.keys(o).forEach((k, i) => (desc[i] = desc[i] || []).push(o[k])));

console.log(desc);

answered Apr 9, 2018 at 12:27

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

2 Comments

Jaromanda X Over a year ago

The only possible issue is that property order is not guaranteed in an object

Nina Scholz Over a year ago

right, i assume, the keys have the same order, as in the given code.

Collectives™ on Stack Overflow

Transform a javascript array of object to an array of array

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related