Как использовать ключ группировки в GroupBy в Rx JS,

Question

У меня есть структура, возвращенная API

Это подпись

methodApi(): Observable(Array<MyClass>)

Это данные

{ id: 1, name: 'Red', parentId: null }
{ id: 2, name: 'Apple', parentId: 1 }
others

Я хочу сгруппировать их по parentId

methodApi()
.pipe(groupby((x: MyClass[] => ...))) // THERE
.subscribe(x => console.log(x));

MethodApi return Observable , в методе groupby в качестве входного параметра у меня есть массив, поэтому я не могу ссылаться на свойство parentId . Когда я меняю параметр ввода на MyClass , я получаю сообщение об ошибке компиляции.

Как разрешить эту группировку? Я использую Angular 9.0 с Rx JS 6.5.5

Answer 1

Вам нужно будет создать другой наблюдаемый поток из вашего массива, используя from, а затем использовать groupBy и после этого преобразовать его обратно в массив результатов:

methodApi().pipe(
  concatMap((result) => from(result)),
  groupBy((item) => item.parentId),
  mergeMap(group => group.pipe(toArray()))
).subscribe(x => console.log(x));

пример стека

Вы также можете использовать mergeAll:

methodApi().pipe(
  mergeAll(),
  groupBy((item) => item.parentId),
  mergeMap(group => group.pipe(toArray()))
).subscribe(x => console.log(x));

пример стека

Answer 2

Это не так, как работает группа Rx Js по операторам. Оператор Rx Js группирует объекты, которые испускаются потоком, вы хотите сгруппировать элементы в массиве, который испускается потоком. Вам нужна группа по функциям, которая работает с массивами, а не с наблюдаемыми. Вы можете использовать простое сокращение, которое объединяет их все в объект с parentId в качестве ключа.

methodApi()
.pipe(map(results => results.reduce(
  (group, item) => {
    if (group[item.parentId]) {
      group[item.parentId].push(item);
    } else {
      group[item.parentId] = [item];
    }
    return group;
  }, {})
)).subscribe(group => {});

Answer 3

Это должно быть просто с использованием оператора groupBy, как показано ниже,

methodApi().pipe(
  groupBy((item) => item.parentId),
  mergeMap(group => group.pipe(toArray()))
).subscribe(console.log) // should get you an array with groupBy parentId