How to map multiple properties to arrays in Angular 6?

Question

I have an array of objects like:

const data: any[] = [
     { x: 1, y: 1 },
     { x: 2, y: 2 },
     { x: 3, y: 4 },
     { x: 4, y: 6 }
];

// get x as array
from(d).pipe(map(m => m.x), toArray()).subscribe(x => ...);

And would like to map it to something like below to use it in Plotly

{
  x: [1,2,3,4],
  y: [1,2,4,6]
}

Of course, I could duplicate the pipe above to get y values, but this would be different subscriptions. Is there another way to solve this?

user4676340 · Accepted Answer · 2019-04-10 09:17:41Z

3

Not related to RxJS, it's just plain JS.

Use reduce as follows :

const data = [
     { x: 1, y: 1 },
     { x: 2, y: 2 },
     { x: 3, y: 4 },
     { x: 4, y: 6 }
];

const plotly = data.reduce((p, n) => ({ 
  x: [...p.x, n.x], 
  y: [...p.y, n.y]
}), { 
  x: [], 
  y: []
});

console.log(plotly);

answered Apr 10, 2019 at 9:17

user4676340

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

Comments

wentjun · Accepted Answer · 2019-04-10 09:26:18Z

0

Let's use some ES6 magic here. We will be making use of the spread syntax and Object.assign. In a way, we are sort of transposing this array of objects.

const data = [
     { x: 1, y: 1 },
     { x: 2, y: 2 },
     { x: 3, y: 4 },
     { x: 4, y: 6 }
];

const result = Object.assign(...Object.keys(data[0]).map(key =>
  ({ [key]: data.map( o => o[key] ) })
));

console.log(result)

edited Apr 10, 2019 at 9:26

answered Apr 10, 2019 at 9:18

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

2 Comments

alex555 Over a year ago

Wow, I have to check out what is happening inside this magic. But I had to add the target Object.assign({},... to compile it. Thank you!

wentjun Over a year ago

@alex555 Yeah, I admit this one might be a bit hard to read! trichetriche's solution seems the most readable amongst all the answers here!

Ashish Ranjan · Accepted Answer · 2019-04-10 09:16:56Z

0

Use rxjs reduce instead

from(this.data).pipe(
  reduce((acc, m) => {
    acc.x.push(m.x);
    acc.y.push(m.y);
    return acc
  }, {x: [], y: []})).subscribe(x => console.log(x));

https://stackblitz.com/edit/angular-gldpxy

answered Apr 10, 2019 at 9:16

Ashish Ranjan

13k5 gold badges32 silver badges53 bronze badges

Collectives™ on Stack Overflow

How to map multiple properties to arrays in Angular 6?

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related