How to integrate a While loop within an RXJS subscription

Question

How to integrate a While loop within an RXJS subscription

I have a piece of Angular code where I am attempting to subscribe to my first API and include a while loop within this subscription. Additionally, I need to subscribe to another API inside the while loop. The reason for this is that I need to subscribe to the inner API multiple times and have the while loop terminate based on a flag returned by the inner API. I have tried to implement the code below, but it is not functioning as expected. I am in need of some assistance.

CallBanyanToFetchQuotes() {
    const url1 = 'http://ws.integration.banyantechnology.com/services/api/rest/ImportForQuote';

    this.http.post(url1, payload)
      .subscribe(importForQuoteResponse => {
        this.importForQuoteResponse = importForQuoteResponse;
        console.log('LoadID = ' + this.importForQuoteResponse.Load.Loadinfo.LoadID);
        this.loadId = this.importForQuoteResponse.Load.Loadinfo.LoadID;

        while (!this.ratingCompleted) {
          const url2 = 'http://ws.integration.banyantechnology.com/services/api/rest/GetQuotes';

          this.http.post(url2, payload)
            .subscribe(getQuoteResponse => {
              this.getQuoteResponse = getQuoteResponse;
              if (this.getQuoteResponse.RatingCompleted === true) {
                this.ratingCompleted = true;
              }
            });
        }
      });
  }

javascript angular typescript rxjs

Answer 1

Answer №1

When making a post request using this.http.post with a payload to URL1, the response is then switched and mapped to a different importForQuoteResponse. From there, the LoadID is extracted and stored in loadID. The sequence continues by setting a timer to make periodic calls to URL2 with the same payload. Each response is tapped into to retrieve quote response data. The calls continue until the RatingCompleted flag in the response is true. Once the condition is met, the ratingCompleted flag is set to true.

This scenario is demonstrated in a "fool example" on StackBlitz.

The explanation of the code is that it initially makes a post request but switches the subscription to a timer, which triggers another post request. The timer interval can be adjusted as needed. The code is structured to keep making calls until a specific condition is met in the response.

Answer 2

When making a post request using this.http.post with a payload to URL1, the response is then switched and mapped to a different importForQuoteResponse. From there, the LoadID is extracted and stored in loadID. The sequence continues by setting a timer to make periodic calls to URL2 with the same payload. Each response is tapped into to retrieve quote response data. The calls continue until the RatingCompleted flag in the response is true. Once the condition is met, the ratingCompleted flag is set to true.

This scenario is demonstrated in a "fool example" on StackBlitz.

The explanation of the code is that it initially makes a post request but switches the subscription to a timer, which triggers another post request. The timer interval can be adjusted as needed. The code is structured to keep making calls until a specific condition is met in the response.

Answer 3

Answer №2

To replicate a while loop, consider utilizing the expand method. With expand, the input is passed to the destination right away, then mapped to an Observable, and the output becomes the next input in the sequence. To terminate this recursive process, map to EMPTY.

// If the URLs are constant, move them outside the function
const url1 = 'http://ws.integration.banyantechnology.com/services/api/rest/ImportForQuote';
const url2 = 'http://ws.integration.banyantechnology.com/services/api/rest/GetQuotes';

callBanyanToFetchQuotes() {
    this.http.post(url1, payload).pipe(
        // Handle the response from url1
        tap(importForQuoteResponse => {
            this.importForQuoteResponse = importForQuoteResponse;
            console.log('LoadID = ' + this.importForQuoteResponse.Load.Loadinfo.LoadID);
            this.loadId = this.importForQuoteResponse.Load.Loadinfo.LoadID;
        }),
        // Switch to url2 request
        switchMap(_ => this.http.post(url2, payload))
        // Keep executing url2 request until rating is complete or end with EMPTY
        expand(quoteResponse => quoteResponse.RatingCompleted ? EMPTY : this.http.post(url2, payload))
        // Process responses from url2 requests
    ).subscribe(quoteResponse => {
        this.getQuoteResponse = quoteResponse;
        if (quoteResponse.RatingCompleted === true) {
            this.ratingCompleted = true;
        }
    });
}

Using the expand method ensures that the subsequent http call is triggered directly and only after receiving a response from the previous one.

Answer 4

To replicate a while loop, consider utilizing the expand method. With expand, the input is passed to the destination right away, then mapped to an Observable, and the output becomes the next input in the sequence. To terminate this recursive process, map to EMPTY.

// If the URLs are constant, move them outside the function
const url1 = 'http://ws.integration.banyantechnology.com/services/api/rest/ImportForQuote';
const url2 = 'http://ws.integration.banyantechnology.com/services/api/rest/GetQuotes';

callBanyanToFetchQuotes() {
    this.http.post(url1, payload).pipe(
        // Handle the response from url1
        tap(importForQuoteResponse => {
            this.importForQuoteResponse = importForQuoteResponse;
            console.log('LoadID = ' + this.importForQuoteResponse.Load.Loadinfo.LoadID);
            this.loadId = this.importForQuoteResponse.Load.Loadinfo.LoadID;
        }),
        // Switch to url2 request
        switchMap(_ => this.http.post(url2, payload))
        // Keep executing url2 request until rating is complete or end with EMPTY
        expand(quoteResponse => quoteResponse.RatingCompleted ? EMPTY : this.http.post(url2, payload))
        // Process responses from url2 requests
    ).subscribe(quoteResponse => {
        this.getQuoteResponse = quoteResponse;
        if (quoteResponse.RatingCompleted === true) {
            this.ratingCompleted = true;
        }
    });
}

Using the expand method ensures that the subsequent http call is triggered directly and only after receiving a response from the previous one.

How to integrate a While loop within an RXJS subscription

Answer №1

Answer №2

Similar questions

The standard process and organization of a project using AngularJS in conjunction with Python Flask

Implement the use of NextAuth to save the session during registration by utilizing the email and password

Utilizing the variable $this outside of an object context within an Ajax function

Index.js is dynamically importing a .tsx file post-build, with a specific focus on Windows

In the present technological landscape, is it still considered beneficial to place Javascript at the bottom of web pages?

SOLVED: NextJS restricts plugins from modifying HTML to avoid unnecessary re-rendering

Mocking a promise rejection in Jest to ensure that the calling function properly handles rejections

Utilize environment variables to access system information when constructing an Angular 2 application

How to Resolve File Paths in CSS Using Angular 7 CLI

Uncovering the Solution: Digging into a Nested ng-repeat to Access an Array in AngularJS

Reactjs and Redux encounter an Unhandled Rejection with the error message stating "TypeError: Cannot read property 'data' of undefined"

Navigating Google Oauth - Optimal User Sign in Locations on Frontend and Backend Platforms

Is it possible to have nullable foreign keys using objectionjs/knex?

Exploring the process of retrieving token expiration in TypeScript using the 'jsonwebtoken' library

The checkbox click function is not functioning properly when placed within a clickable column

`Turn a photo into a circular shape by cropping it`

Is the side tab overflowing the window due to its absolute positioning?

Updating the Navigation Bar and Theme in CRM Dynamics 2013 to Reflect Your Organization's Branding

Looping through a series of URLs in AngularJS and performing an $

I'm having trouble extracting data into my HTML file using the append function in Jquery. What could be causing this issue?