Consecutive requests to APIs using RxJs

Question

Consecutive requests to APIs using RxJs

Is it possible to efficiently make sequential API calls using RxJs? The challenge lies in the fact that the first Observable emits an array, and for each item in this array, a custom URL should be set for the next call. Additionally, certain conditions need to be checked in the second call before returning an Observable.

I'm struggling with setting the URL for each element of the array as it changes. Can anyone provide guidance on how to achieve this?

  private fetchData(): Observable<boolean> {
    return this.service
      .getItems()
      .pipe(
        map((response) => response.items),
        mergeMap((result) => {
          result.map((order) =>
            this.orderService.setCustomUrl(order.number)
          );
          return this.orderService.getItems().pipe(
            mergeMap((response) => {
              if (response.items.some((item) => item.number === this.model.number)) {
                return of(true);
              } else {
                return of(false);
              }
            }),
          );
        })
      );
  }

angular typescript rxjs request

Answer 1

Answer №1

The issue here arises because you are calling the setCustomUrl() function without utilizing .getItems() until after the completion of the map() operation. By the time .getItems() is invoked, the service has already received the final item from .map().

To achieve the desired outcome, you can implement the following code snippet:

function fetchData(): Observable<boolean> {
  return this.service
    .getItems()
    .pipe(
      map((response) => response.items),
      switchMap(items => from(items).pipe(
        concatMap(item=>{
          this.orderService.setCustomUrl(item.number);
          return this.orderService.getItems().pipe(
            map(response => response.items.some((item) => item.number === this.model.number))
          );
        }),
        toArray()
      )),
      map(items => items.some(item => item))
    );
}

The from() operator breaks down an array and emits each value individually, allowing us to perform the .some() check for boolean values.

Subsequently, the toArray() method collates these values back into an array for further processing.

Finally, a last map() operation evaluates if all items meet the specified criteria.

Answer 2

The issue here arises because you are calling the setCustomUrl() function without utilizing .getItems() until after the completion of the map() operation. By the time .getItems() is invoked, the service has already received the final item from .map().

To achieve the desired outcome, you can implement the following code snippet:

function fetchData(): Observable<boolean> {
  return this.service
    .getItems()
    .pipe(
      map((response) => response.items),
      switchMap(items => from(items).pipe(
        concatMap(item=>{
          this.orderService.setCustomUrl(item.number);
          return this.orderService.getItems().pipe(
            map(response => response.items.some((item) => item.number === this.model.number))
          );
        }),
        toArray()
      )),
      map(items => items.some(item => item))
    );
}

The from() operator breaks down an array and emits each value individually, allowing us to perform the .some() check for boolean values.

Subsequently, the toArray() method collates these values back into an array for further processing.

Finally, a last map() operation evaluates if all items meet the specified criteria.

Answer 3

Answer №2

Here is a breakdown of what is happening in your code:

        {
          // Loop through each element in the "result" array and call "this.orderService.setCustomUrl(order.number)"
          result.map((order) =>
            this.orderService.setCustomUrl(order.number)
          );
          // Assuming "setCustomUrl" is setting a single variable, only the last "order.number" will be set at this point

          // Afterwards, this part executes once and returns a boolean value for the last order
          return this.orderService.getItems().pipe(
            mergeMap((response) => {
              // Check if any item number in the response matches with "this.model.number"
              if (response.items.some((item) => item.number === this.model.number)) {
                return of(true);
              } else {
                return of(false);
              }
            }),
          );
        }

The intended goal seems to be verifying if any order returned by this.orderService.getItems() using order.number has an item number matching this.model.number. Here is a revised approach you could take:

Firstly, modify your service call to include the order number like so:

this.orderService.getItems(order.number)

Then, consider the following implementation:

private func(): Observable<boolean> {
    return this.service
      .getItems()
      .pipe(
        switchMap((orders) =>
          from(orders.items).pipe(
// For each item in the initial response, return an observable that maps its result to a boolean as per your original function
            mergeMap((order) =>
              this.orderService
                .getItems(order.number)
                .pipe(map((itemsResponse) => itemsResponse.items.some((item) => item.number === this.model.number)))
            )
          )
        ),
// Collect all the boolean observables and yield only when all resolve
        toArray(),
// Aggregate all boolean values into one
        map((all) => all.some((x) => x)),
// Complete the subscription after the first yield
        take(1)
      )

Answer 4

Here is a breakdown of what is happening in your code:

        {
          // Loop through each element in the "result" array and call "this.orderService.setCustomUrl(order.number)"
          result.map((order) =>
            this.orderService.setCustomUrl(order.number)
          );
          // Assuming "setCustomUrl" is setting a single variable, only the last "order.number" will be set at this point

          // Afterwards, this part executes once and returns a boolean value for the last order
          return this.orderService.getItems().pipe(
            mergeMap((response) => {
              // Check if any item number in the response matches with "this.model.number"
              if (response.items.some((item) => item.number === this.model.number)) {
                return of(true);
              } else {
                return of(false);
              }
            }),
          );
        }

The intended goal seems to be verifying if any order returned by this.orderService.getItems() using order.number has an item number matching this.model.number. Here is a revised approach you could take:

Firstly, modify your service call to include the order number like so:

this.orderService.getItems(order.number)

Then, consider the following implementation:

private func(): Observable<boolean> {
    return this.service
      .getItems()
      .pipe(
        switchMap((orders) =>
          from(orders.items).pipe(
// For each item in the initial response, return an observable that maps its result to a boolean as per your original function
            mergeMap((order) =>
              this.orderService
                .getItems(order.number)
                .pipe(map((itemsResponse) => itemsResponse.items.some((item) => item.number === this.model.number)))
            )
          )
        ),
// Collect all the boolean observables and yield only when all resolve
        toArray(),
// Aggregate all boolean values into one
        map((all) => all.some((x) => x)),
// Complete the subscription after the first yield
        take(1)
      )

Consecutive requests to APIs using RxJs

Answer №1

Answer №2

Similar questions

Utilizing Angular to reference a computed variable in a different function while iterating through a loop

Guide on how to add a generic return type to a function in typescript

What is the best way to bypass TS1192 when incorporating @types/cleave.js into my Angular application?

Encountered a MongoDB error: $pushAll modifier is unrecognized when trying to update a model using Mongoid, Angular, and Rails frameworks

Leveraging WebStorm's TypeScript support in conjunction with node_modules

Using either prop type for a React component in Typescript

Using NextJs <Script> is only effective after a page has been reloaded

What could be causing my NextJS application to not recognize the _document.tsx file?

How to access nested JSON elements in Javascript without relying on the eval function

Custom type declaration file in Typescript fails to function properly

Any suggestions for a more effective method of managing authentication in Angular2 rc3 besides using guards?

Utilizing React Custom Hooks for Firestore Data Retrieval

Is it feasible to bring in a Typescript file into an active ts-node REPL session?

The setting of the custom user agent in the Chrome Extension Manifest Version 3 is not functioning correctly

Angular2 form builder generating dynamic forms based on results of asynchronous calls

The typing library for Angular does not properly identify the JQueryStatic object

Testing Angular - The Art of Mocking InjectionToken

Utilizing StyleFunctionProps within JavaScript for Chakra UI Enhancements

What is the best way to utilize v-model with an array of strings in a Vuex store when using v-for

Do Prisma Migrations Require a Default Value?