Combining data from various API calls into one cohesive array using RXJS

Question

Combining data from various API calls into one cohesive array using RXJS

My RXJS Pipeline is structured as follows:

const logs: number[] = [1, 2, 3, 4];
const url = 'http://some-url-here.com';

const pipeline = from(logs).pipe(
  switchMap(logId =>
    this.callEndpoint(url, logId).pipe(map(response => response.data)),
  ),
);

const res = await pipeline.toPromise();
console.log(res);



// The actual function utilizes nestJS http service to reach a URL
callEndpoint(url: string, logId: number) {
  const result = Math.random() * 1000;
  console.log(`result in callEndpoint: ${result}`);
  return of({ data: result });
}

A preview of the code's output can be seen below:

result in callEndpoint: 586.773956063481
result in callEndpoint: 842.136341622411
result in callEndpoint: 964.0849490798163
result in callEndpoint: 598.7596176858414
598.7596176858414

The final number represents the value stored in res.

Is there a way to consolidate all the successful endpoint calls' results into a single array within the variable res?

typescript rxjs nestjs

Answer 1

Answer №1

For sending all requests simultaneously, use the forkJoin method. If you prefer to send requests sequentially and gather the results in an array, then use concat along with toArray. It's advisable to include error handling using catchError to ensure that the observable does not produce any errors.

const getData = (logId) => this.callEndpoint(url, logId).pipe(
  map(response => response.data),
  catchError(error => of(null))
)
const requests = logs.map(logId => getData(logId));

// for parallel requests
forkJoin(requests).subscribe(res => console.log(res));

// for sequential requests
concat(...requests).pipe(toArray()).subscribe(res => console.log(res));

The resulting array stored in res may contain null values if a request fails. For example, if the second request fails, the array might look like:

[586.773956063481, null, 964.0849490798163, 598.7596176858414]

Answer 2

For sending all requests simultaneously, use the forkJoin method. If you prefer to send requests sequentially and gather the results in an array, then use concat along with toArray. It's advisable to include error handling using catchError to ensure that the observable does not produce any errors.

const getData = (logId) => this.callEndpoint(url, logId).pipe(
  map(response => response.data),
  catchError(error => of(null))
)
const requests = logs.map(logId => getData(logId));

// for parallel requests
forkJoin(requests).subscribe(res => console.log(res));

// for sequential requests
concat(...requests).pipe(toArray()).subscribe(res => console.log(res));

The resulting array stored in res may contain null values if a request fails. For example, if the second request fails, the array might look like:

[586.773956063481, null, 964.0849490798163, 598.7596176858414]

Answer 3

Answer №2

Utilize the function toArray() to gather all emissions and emit them as a single array once the source observable is completed.

const pipeline = from(logs).pipe(
  switchMap(logId => this.callEndpoint(url, logId).pipe(map(response => response.data)),
  toArray(),
);

However, it seems that using switchMap in this scenario may not be ideal. Since the source observable, from(), immediately emits all items from logs, switchMap will only remain subscribed to the last item. Consider utilizing concatMap instead.

Answer 4

Utilize the function toArray() to gather all emissions and emit them as a single array once the source observable is completed.

const pipeline = from(logs).pipe(
  switchMap(logId => this.callEndpoint(url, logId).pipe(map(response => response.data)),
  toArray(),
);

However, it seems that using switchMap in this scenario may not be ideal. Since the source observable, from(), immediately emits all items from logs, switchMap will only remain subscribed to the last item. Consider utilizing concatMap instead.

Combining data from various API calls into one cohesive array using RXJS

Answer №1

Answer №2

Similar questions

Incorporating HTML and JavaScript into TypeScript: How to Embed a Shopify Buy Button in a .tsx document

Excluding node modules from Webpack TerserPlugin

Creating an Inner Join Query Using TypeORM's QueryBuilder: A Step-by-Step Guide

Unable to locate the specified environment variable in the current nest

Typescript interface design for nested objects in a hierarchical structure

How can we access child components in vanilla JavaScript without using ng2's @ViewChild or @ContentChild decorators?

Combining functions does not result in a callable function, even when the parameters fulfill the constraints of each individual function

Tips for using the "distinct" RxJS operator effectively in Angular 2

Determining block time based on block number within Polygon Mumbai Testnet

The absence of a base path in NestJs swagger configuration

Is there a way for me to store the current router in a state for later use

The collaboration of React hooks, typescript, mongoose, express, and socket.io in perfect harmony

Error: Code cannot be executed because the variable "sel" has not been defined in the HTML element

Leveraging Nextjs Link alongside MUI Link or MUI Button within a different functional component (varieties)

How can I update the image source using Angular?

When using RXJS, the method BehaviorSubject.next() does not automatically notify subscribers

Cannot utilize the subscribed output value within the filter function

Maintaining scroll position in React Router v6

Can builtins like DOM globals be explicitly imported?

Issues with applying different styles in a React Component based on prop values are hindering the desired outcome