RXJS组通过可观察<Object []>

Question

我有entries$: Observable<BooksOverviewGroup[]>;：

我想按groupId分组。我这样尝试过：

groupBy(books => books.map(book => book.groupId)),
 mergeMap(innerObs => innerObs.skip(1).map(books => books.map(book => book.groupTitle)));

但是，它没有用。在这种情况下，如何按groupId分组？(Observable<Object[]>)

Answer 1

你几乎明白了。

尝试使用mergeMap()或concatMap()之前groupBy()。

所以一个例子：

const people = [
  { name: 'Sue', age: 25 },
  { name: 'Joe', age: 30 },
  { name: 'Frank', age: 25 },
  { name: 'Sarah', age: 35 }
];

of(people) // <- this gets Observable<Object[]>
  .pipe(
    mergeMap(res => res), // <- use concatMap() if you care about the order
    groupBy(person => person.age, p => p.name),
    mergeMap(group => zip(of(group.key), group.pipe(toArray())))
  )
  .subscribe(console.log);

输出：

(2) [25, Array(2)]
(2) [30, Array(1)]
(2) [35, Array(1)]

Answer 2

高阶可观察

如果您想获得更高阶的可观察值，则可以实际使用groupByrxjs运算符。

const data = [
  {groupId: "foo", value: 1},
  {groupId: "foo", value: 3},
  {groupId: "foo", value: 5},
  {groupId: "bar", value: 42},
  {groupId: "bar", value: 1337},
];

from(data).pipe(
  groupBy(item => item.groupId)
)
  .subscribe(console.log);

这将导致可观察到的对象每组发出一个可观察对象，并且在这些内部可观察对象的每一个上，将发出相应的项。

可观察的团体

相反，如果您想要一个仅发出组的可观察对象，那么这实际上与rxjs或其groupBy操作符无关。相反，这仅仅是有关如何在Javascript中对数组进行分组的基本问题。

没有内置的方法，但是像lodash这样的库附带了这样的功能。您也可以手动执行以下操作：

const data = [
  {groupId: "foo", value: 1},
  {groupId: "foo", value: 3},
  {groupId: "foo", value: 5},
  {groupId: "bar", value: 42},
  {groupId: "bar", value: 1337},
];

const groupBy = (data, keyFn) => data.reduce((agg, item) => {
  const group = keyFn(item);
  agg[group] = [...(agg[group] || []), item];
  return agg;
}, {});

of(data).pipe(
  map(data => groupBy(data, item => item.groupId)
)
  .subscribe(console.log);

这将为整个数据集发出一次，但将发出

{
  "foo":[
    {"groupId":"foo","value":1},
    {"groupId":"foo","value":3},
    {"groupId":"foo","value":5}
  ],
  "bar":[
    {"groupId":"bar","value":42},
    {"groupId":"bar","value":1337}
  ]
}

Answer 3

只需使用groupBy 运算符，然后将它们全部合并。

$data.pipe(
    groupBy(book => book.groupId),
    mergeMap(group => group.pipe(toArray()))
)
.subscribe(console.log)