[RxJS] Combination operator: withLatestFrom

Posted 2020-07-13 Answer1215

Operator combineLatest is not the only AND-style combinator. In this lesson we will explore withLatestFrom, another AND-style combination operator, and how it works essentially as map() operator, with some combination properties.

 

var foo = Rx.Observable.interval(400)
.zip(Rx.Observable.of(‘h‘, ‘e‘, ‘l‘, ‘l‘, ‘o‘), (__, x) => x);
var bar = Rx.Observable.interval(300)
.zip(Rx.Observable.of(0,1,1,0,0,1,0,0,1), (__ ,x) =>  x);

/*
----h----e----l----l----o|     (foo)
--0--1--1--0--0--1--0--0--1|   (bar)
  withLatestFrom((c,n) => n === 1 ? c.toUpperCase() : c.toLowerCase())
----h----E----l----L----o|
*/

var combined = foo.withLatestFrom(bar, (c,n) => n === 1 ? c.toUpperCase() : c.toLowerCase());

combined.subscribe(
  function (x) { console.log(‘next ‘ + x); },
  function (err) { console.log(‘error ‘ + err); },
  function () { console.log(‘done‘); },
);
  
  /*
 "next h"
"next E"
"next l"
"next l"
"next O"
"done" 
  */

 

The foo is the main stream, when foo emit each time, it will take the latest value from bar, if the value from bar is 1, then convert foo to upcase string, otherwise lower case string.