Как сопоставить несколько свойств массивов в Angular 6?

Question

У меня есть массив объектов, таких как:

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

И хотел бы сопоставить его с чем-то вроде ниже, чтобы использовать его в Plotly

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

Конечно, я мог бы продублировать вышеприведенный канал, чтобы получить значения y, но это были бы разные подписки. Есть ли другой способ решить эту проблему?

Answer 1

Не относится к RxJS, это просто JS.

Используйте reduce следующим образом:

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

Answer 2

Давайте использовать немного магии ES6 здесь. Мы будем использовать синтаксис распространения и Object.assign . В некотором смысле, мы как бы переносим этот массив объектов.

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)

Answer 3

Используйте rxjs уменьшите вместо

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