Utilizing RxJS to maintain the value and seamlessly transition to a new one with switchMap

Question

Utilizing RxJS to maintain the value and seamlessly transition to a new one with switchMap

// Ticker data will be updated every 3 seconds
// Show hand action will only trigger after user clicks a button
// When the user clicks the button, I want to use the last ticker price as the order price

let lastPrice: number;

this.ticker$
  .do(ticker => lastPrice = ticker.closePrice)
  .switchMap(() => this.showHand$)
  .subscribe(showHand => {
     this.order.price = lastPrice;
     this.order.amount = showHand.amount;
     this.order.type = showHand.type;

     this.submit();
  });

Any suggestions on how to preserve value and switch map together without using a one-line variable like above?

javascript angular typescript rxjs observable

Answer 1

Answer №1

The results selector function in version 6 is now deprecated and will be completely removed in version 7.

According to the documentation:

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

Example with resultSelector (v5.x)

source.pipe(
 switchMap(fn1, fn2)
)

To achieve the same functionality without resultSelector, you can use inner map like this:

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

Answer 2

The results selector function in version 6 is now deprecated and will be completely removed in version 7.

According to the documentation:

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

Example with resultSelector (v5.x)

source.pipe(
 switchMap(fn1, fn2)
)

To achieve the same functionality without resultSelector, you can use inner map like this:

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

Answer 3

Answer №2

To achieve the desired functionality, you can utilize a custom overload of SwitchMap, incorporating a selector function that combines both the outer and inner values:

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

Answer 4

To achieve the desired functionality, you can utilize a custom overload of SwitchMap, incorporating a selector function that combines both the outer and inner values:

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

Answer 5

Answer №3

If you want to achieve this particular functionality, an interesting workaround is to create a new observable within the switchmap operator. This new observable can access the value passed into the switchmap function and then use it within an inner map to retain the original value.

this.ticker$
  .switchMap(ticker => this.showHand$.pipe(map(hand => ({ ticker,hand }) ))
  .subscribe( obj => {
     // utilize the value here
     this.order.price = obj.ticker;
     this.order.amount = obj.hand.amount;
     this.order.type = obj.hand.type;

     this.submit();
  });

Answer 6

If you want to achieve this particular functionality, an interesting workaround is to create a new observable within the switchmap operator. This new observable can access the value passed into the switchmap function and then use it within an inner map to retain the original value.

this.ticker$
  .switchMap(ticker => this.showHand$.pipe(map(hand => ({ ticker,hand }) ))
  .subscribe( obj => {
     // utilize the value here
     this.order.price = obj.ticker;
     this.order.amount = obj.hand.amount;
     this.order.type = obj.hand.type;

     this.submit();
  });

Answer 7

Answer №4

This is my take on the code:

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();      
  });

Remember, using take(1) will close the subscription. If you want to allow the user to press the button multiple times, save the subscription to a constant and unsubscribe when necessary.

Answer 8

This is my take on the code:

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();      
  });

Remember, using take(1) will close the subscription. If you want to allow the user to press the button multiple times, save the subscription to a constant and unsubscribe when necessary.

Utilizing RxJS to maintain the value and seamlessly transition to a new one with switchMap

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Building a dynamic AngularJS module on-the-fly: A step-by-step guide

Why isn't the onChange function triggering in the input type text when the input is not manually typed in?

Mongoose Error: Typescript String Error: 'not assignable to type 'string'

What is the best way to convert all JS, CSS, and IMG files to a static subdomain

Guide to authenticating a Bearer token using a .pfx certificate and password in a NodeJs environment

Error message: "jQuery DataTables not working - table disappears when modal window opens

The issue of receiving an undefined JSON response persists in an AJAX file upload scenario

How to Display Graph Horizontally using jqBarGraph

Using Javascript to access element that was dynamically created by using getElementById

Tips for implementing conditional app.use() in nestJS backend strategies?

ag-grid renderer displays a checked state in checkbox column

Sending data to <nuxt-link> component without using parameters or passing hidden information to the router without using parameters

Tips for protecting against XSS attacks for APIs accessed by both Angular and non-Angular applications

Downloading EJS File instead of Displaying on Express.js Router

Is it permissible to combine the leaflet plugin .js and .css files?

I would like my division to split into two halves, each with a width of 50%, and be aligned next to each other using fxLayout

Remove the container once all of its children have been dismissed

Transforming class attributes in Typescript

What is the best way to integrate a React component into an Angular project?

What changes can I make to this javascript code?

Utilizing RxJS to maintain the value and seamlessly transition to a new one with switchMap

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Building a dynamic AngularJS module on-the-fly: A step-by-step guide

Why isn't the onChange function triggering in the input type text when the input is not manually typed in?

Mongoose Error: Typescript String Error: 'not assignable to type 'string'

What is the best way to convert all JS, CSS, and IMG files to a static subdomain

Guide to authenticating a Bearer token using a .pfx certificate and password in a NodeJs environment

Error message: "jQuery DataTables not working - table disappears when modal window opens

The issue of receiving an undefined JSON response persists in an AJAX file upload scenario

How to Display Graph Horizontally using jqBarGraph

Using Javascript to access element that was dynamically created by using getElementById

Tips for implementing conditional app.use() in nestJS backend strategies?

ag-grid renderer displays a checked state in checkbox column

Sending data to <nuxt-link> component without using parameters or passing hidden information to the router without using parameters

Tips for protecting against XSS attacks for APIs accessed by both Angular and non-Angular applications

Downloading EJS File instead of Displaying on Express.js Router

Is it permissible to combine the leaflet plugin *.js and *.css files?

I would like my division to split into two halves, each with a width of 50%, and be aligned next to each other using fxLayout

Remove the container once all of its children have been dismissed

Transforming class attributes in Typescript

What is the best way to integrate a React component into an Angular project?

What changes can I make to this javascript code?

Is it permissible to combine the leaflet plugin .js and .css files?