Groups the items emitted by an Observable according to a specified criterion, and emits these grouped items as GroupedObservables, one GroupedObservable per group.

groupBy<T, K, R>(keySelector: (value: T) => K, elementSelector?: ((value: T) => R) | void, durationSelector?: (grouped: GroupedObservable<K, R>) => Observable<any>, subjectSelector?: () => Subject<R>): OperatorFunction<T, GroupedObservable<K, R>>

Parameters

keySelector	A function that extracts the key for each item.
elementSelector	Optional. Default is undefined. A function that extracts the return element for each item.
durationSelector	Optional. Default is undefined. A function that returns an Observable to determine how long each group should exist.
subjectSelector	Optional. Default is undefined. Type: () => Subject.

Returns

OperatorFunction<T, GroupedObservable<K, R>>: An Observable that emits GroupedObservables, each of which corresponds to a unique key value and each of which emits those items from the source Observable that share that key value.

Description

When the Observable emits an item, a key is computed for this item with the keySelector function.

If a GroupedObservable for this key exists, this GroupedObservable emits. Elsewhere, a new GroupedObservable for this key is created and emits.

A GroupedObservable represents values belonging to the same group represented by a common key. The common key is available as the key field of a GroupedObservable instance.

The elements emitted by GroupedObservables are by default the items emitted by the Observable, or elements returned by the elementSelector function.

Examples

Group objects by id and return as array

import { of } from 'rxjs';
import { mergeMap, groupBy, reduce } from 'rxjs/operators';

of(
  {id: 1, name: 'JavaScript'},
  {id: 2, name: 'Parcel'},
  {id: 2, name: 'webpack'},
  {id: 1, name: 'TypeScript'},
  {id: 3, name: 'TSLint'}
).pipe(
  groupBy(p => p.id),
  mergeMap((group$) => group$.pipe(reduce((acc, cur) => [...acc, cur], []))),
)
.subscribe(p => console.log(p));

// displays:
// [ { id: 1, name: 'JavaScript'},
//   { id: 1, name: 'TypeScript'} ]
//
// [ { id: 2, name: 'Parcel'},
//   { id: 2, name: 'webpack'} ]
//
// [ { id: 3, name: 'TSLint'} ]

Pivot data on the id field

import { of } from 'rxjs';
import { groupBy, map, mergeMap, reduce } from 'rxjs/operators';

of(
  { id: 1, name: 'JavaScript' },
  { id: 2, name: 'Parcel' },
  { id: 2, name: 'webpack' },
  { id: 1, name: 'TypeScript' },
  { id: 3, name: 'TSLint' }
)
  .pipe(
    groupBy(p => p.id, p => p.name),
    mergeMap(group$ =>
      group$.pipe(reduce((acc, cur) => [...acc, cur], [`${group$.key}`]))
    ),
    map(arr => ({ id: parseInt(arr[0], 10), values: arr.slice(1) }))
 )
 .subscribe(p => console.log(p));

// displays:
// { id: 1, values: [ 'JavaScript', 'TypeScript' ] }
// { id: 2, values: [ 'Parcel', 'webpack' ] }
// { id: 3, values: [ 'TSLint' ] }

Overloads

groupBy(keySelector: (value: T) => K): OperatorFunction<T, GroupedObservable<K, T>>

Parameters

keySelector

Type: (value: T) => K.

Returns

OperatorFunction<T, GroupedObservable<K, T>>

groupBy(keySelector: (value: T) => K, elementSelector: void, durationSelector: (grouped: GroupedObservable<K, T>) => Observable<any>): OperatorFunction<T, GroupedObservable<K, T>>

Parameters

keySelector	Type: (value: T) => K.
elementSelector	Type: void.
durationSelector	Type: (grouped: GroupedObservable) => Observable.

Returns

OperatorFunction<T, GroupedObservable<K, T>>

groupBy(keySelector: (value: T) => K, elementSelector?: (value: T) => R, durationSelector?: (grouped: GroupedObservable<K, R>) => Observable<any>): OperatorFunction<T, GroupedObservable<K, R>>

Parameters

keySelector	Type: (value: T) => K.
elementSelector	Optional. Default is undefined. Type: (value: T) => R.
durationSelector	Optional. Default is undefined. Type: (grouped: GroupedObservable) => Observable.

Returns

OperatorFunction<T, GroupedObservable<K, R>>

groupBy(keySelector: (value: T) => K, elementSelector?: (value: T) => R, durationSelector?: (grouped: GroupedObservable<K, R>) => Observable<any>, subjectSelector?: () => Subject<R>): OperatorFunction<T, GroupedObservable<K, R>>

Parameters

keySelector	Type: (value: T) => K.
elementSelector	Optional. Default is undefined. Type: (value: T) => R.
durationSelector	Optional. Default is undefined. Type: (grouped: GroupedObservable) => Observable.
subjectSelector	Optional. Default is undefined. Type: () => Subject.

Returns

OperatorFunction<T, GroupedObservable<K, R>>