[RxJS] Use groupBy in real RxJS applications

Posted 2020-08-28 Answer1215

This lesson will show when to apply groupBy in the real world. This RxJS operator is best suited when a source observable represents many data sources, e.g. an observable for multitouch events.

 

const busObservable = Rx.Observable.of(
  {code: ‘en-us‘, value: ‘-TEST-‘},
  {code: ‘en-us‘, value: ‘hello‘},
  {code: ‘es‘, value: ‘-TEST-‘},
  {code: ‘en-us‘, value: ‘amazing‘},
  {code: ‘pt-br‘, value: ‘-TEST-‘},
  {code: ‘pt-br‘, value: ‘olá‘},
  {code: ‘es‘, value: ‘hola‘},
  {code: ‘es‘, value: ‘mundo‘},
  {code: ‘en-us‘, value: ‘world‘},
  {code: ‘pt-br‘, value: ‘mundo‘},
  {code: ‘es‘, value: ‘asombroso‘},
  {code: ‘pt-br‘, value: ‘maravilhoso‘}
).concatMap(x => Rx.Observable.of(x).delay(500));

const all = busObservable
  .groupBy(obj => obj.code) // 2-d obs
  .mergeMap(innerObs => innerObs.skip(1).map(obj => obj.value));

all.subscribe(x => console.log(x));

/*
"hello"
"amazing"
"olá"
"hola"
"mundo"
"world"
"mundo"
"asombroso"
"maravilhoso"
*/

 

• The ‘groupBy‘ return a 2-d observable, can use ‘switchMap‘ or ‘mergeMap‘ to conver to 1-d observable.