RxJS, Observable, how to preserve value and switch map to another one

rxjs switchmap
rxjs withlatestfrom
rxjs map
rxjs chain observables
switchmap multiple observables
rxjs concat
rxjs combinelatest
rxjs wait for observable to complete
// ticker$ will update every 3s
// showHand$ will only triger after user click button
// I would like to take last ticker price as user order price when user click button

let lastPrice: number;

this.ticker$
  // What I am doing now is preserve value to vairable here.
  .do(ticker => lastPrice = ticker.closePrice)
  .switchMap(() => this.showHand$)
  .subscribe(showHand => {
     // use value here
     this.order.price = lastPrice;
     this.order.amount = showHand.amount;
     this.order.type = showHand.type;

     this.submit();
  });

Any segestion about how to prevser value and switch map together, without one line variable like above?

I think this is the operator

this.showHand$.take(1)
  .withLatestFrom(this.ticker$)
  .subscribe(([showHand, ticker]) => {
    this.order.price = ticker.closePrice;
    this.order.amount = showHand.amount;
    this.order.type = showHand.type;
    this.submit();      
  });

Note, take(1) will close subscription, but if you want the user to be able to press the button many times, save the subscription to a const and unsubscribe when finished.

Understanding RxJS map, mergeMap, switchMap and concatMap, Understanding RxJS map, mergeMap, switchMap and concatMap For each value that the Observable emits you can apply a function in which you will not subscribe to the next Observable until the current one completes. The map operator. The map operator is the most common of all. For each value that the Observable emits you can apply a function in which you can modify the data.

Results selector function is deprecated in version 6 will be removed in version 7.

From docs:

https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md#result-selectors

with resultSelector (v5.x)

source.pipe(
 switchMap(fn1, fn2)
)

the same functionality without resultSelector, achieved with inner map

source.pipe(
 switchMap((a, i) => fn1(a, i).pipe(
   map((b, ii) => fn2(a, b, i, ii))
 )
)

RxJS: Accessing a previous value further down the pipe chain, Often we want to access a value from a previous operator in RxJS, but that value is Solution 1: Pass the values down the chain with a nested pipe and map We put the previous value back into an observable with of() : uses some time, and the user stream have received a new value in the meantime. The main difference between switchMap and other flattening operators is the cancelling effect. On each emission the previous inner observable (the result of the function you supplied) is cancelled and the new observable is subscribed. You can remember this by the phrase switch to a new observable.

The behaviour you require is already possible with an overload of SwitchMap with a selectorFunc for the combination of every (outerValue,innerValue):

this.ticker$
  .switchMap(
    () => this.showHand$,
    (tickerValue, switchMap) => tickerValue
  )
  .subscribe(showHand => { });

Thinking in nested streams with RxJS, Other RxJS operators were like nothing I had seen before, such as flatMap , and switchMap . into an observable from inside the map operator, the next operator in your been flattened into one, and all the values have been preserved. in both examples, using plain map instead of flatMap or switchMap  In higher-order mapping, instead of mapping a plain value like 1 to another value like 10, we are going to map a value into an Observable! The result is a higher-order Observable. It's just an Observable like any other, but its values are themselves Observables as well, that we can subscribe to separately.

switchMap, Map to observable, complete previous inner observable, emit values. If you would like more than one inner subscription to be maintained, try mergeMap ! The main difference between switchMap and other flattening operators is the  New to transformation operators? Check out the article Get started transforming streams with map, pluck, and mapTo!

Observable, Ignores source values for a duration determined by another Observable, then emits the Observable completes it emits a single item: the item with the largest value. switchMap(project: function(value: T, ?index: number): ObservableInput, is not already bound, in order to preserve the context it is recommended that the  Example. The following is an Observable that pushes the values 1, 2, 3 immediately (synchronously) when subscribed, and the value 4 after one second has passed since the subscribe call, then completes:

RxJS a deep dive with Angular 8, If we add two values in the below example “Hello 1” and “Hello Again”, When There is no order in the returned observables, moreover, the order is not preserved. switchMap immediately creates a new observable and completes the old  Splits the source Observable into two, one with values that satisfy a predicate, and another with values that don't satisfy the predicate. It's like filter, but returns two Observables: one like the output of filter, and the other with values that did not pass the condition.

Comments
  • Please consider changing the accepted answer to the result selector solution posted by Cameron. There is no need to use another operator and withLatestFrom has certain caveats.
  • what does take(1) do?
  • take(n) limits the number of items from showHand$ and emits complete() after n items. A complete on this should automatically stop the subscription.
  • This should be the accepted answer. withLatestFrom() has certain caveats when subscribing late that this solution doesn't have.
  • The second example here (switchMap with inner map) worked great for me!
  • someone should make an article about this resultSelectorFunction