RxJS 7+

Appearance

Return to top
On this page

Comment utiliser groupBy RxJS ?

Le groupBy est une opérateur RxJS qui permet de regrouper les éléments d'un observable en fonction d'une clé que vous définissez. Vous pouvez l'utiliser comme suit :

js
import { of, from, groupBy, mergeMap, toArray } from 'rxjs';

const source$ = from([
  {
    country: 'France',
    city: 'Paris',
  },
  {
    country: 'France',
    city: 'Marseille',
  },
  {
    country: 'Italy',
    city: 'Rome',
  },
]);

source$
  .pipe(
    groupBy(place => place.country),
    mergeMap(group$ => group$.pipe(toArray()))
  )
  .subscribe(groupedPlaces => {
    console.log(groupedPlaces);
    // Output:
    // [
    //   {
    //     country: 'France',
    //     city: 'Paris',
    //   },
    //   {
    //     country: 'France',
    //     city: 'Marseille',
    //   }
    // ]
    // [
    //   {
    //     country: 'Italy',
    //     city: 'Rome',
    //   },
    // ]
  });

Dans l'exemple ci-dessus, nous utilisons l'opérateur groupBy pour regrouper les éléments de source$ en fonction de la propriété country. Nous utilisons ensuite l'opérateur mergeMap pour émettre les groupes d'éléments et l'opérateur toArray pour convertir chaque groupe en un tableau.