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 GroupedObservable
s 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>>
|