Utilizing recursive techniques with expand() and concatMap() in Angular 7

Question

Utilizing recursive techniques with expand() and concatMap() in Angular 7

Below is a list of APIs I am working with:

1. https://www.something.com/?filter=something

Result: 
{ 
  id: 12
  previous: null
  next: https://www.something.com/?filter=something&page=2
  data: ...
}

2. https://www.something.com/?filter=something&page=2

Result: 
{ 
  id: 13
  previous: https://www.something.com/?filter=something
  next: https://www.something.com/?filter=something&page=3
  data: ...
}

3. https://www.something.com/?filter=something&page=3

Result: 
{ 
  id: 14
  previous: https://www.something.com/?filter=something&page=2
  next: null
  data: ...
}

I am attempting to loop through all the URLs, gather and combine the data from each API call, and only continue if the 'next' variable is not null.

This is my current approach:

 getByURL(url: string): any {
    return this.apiService.get(url).pipe(map(data => data));
  }

  getData(): Observable<any> {
    const url = 'https://www.something.com/?filter=something';
    return this.getByURL(url).pipe(
      expand(({ data }) => {
        if (!data.next) return this.getByURL(data.next);
        else return empty();
      }),
      concatMap(({ content }) => {
        return of(content.data);
      })
    );
  }

However, I am getting undefined results after trying for several days. Any help would be appreciated. Thanks!

UPDATED

I have shared my code on stackblitz: I am making 3 API calls :

http://5cf15627c936cb001450bd0a.mockapi.io/users
http://5cf15627c936cb001450bd0a.mockapi.io/users2
http://5cf15627c936cb001450bd0a.mockapi.io/users3

I am aiming to collect all the data from each request. Please check the console in the provided link to see the output. I keep getting undefined. Thank you

https://stackblitz.com/edit/angular-rai6az?file=src%2Fapp%2Fapp.component.ts

javascript angular typescript rxjs

Answer 1

Answer №1

I updated the code for you as shown below (updated stackblitz)

  ngOnInit() {
    this.getByPageNext()
      .subscribe(data => {
        console.log(data);
      });
  }

  get(url: string): Observable<any> {
    return this.httpClient
      .get(url)
      .pipe(catchError(this.formatErrors));
  }

  formatErrors(error: any) {
    console.error('error', error);
    return throwError(error.error);
  }

  getByURL(url: string): any {
    return this.get(url);
  }

  getByPageNext(): Observable<any> {
    const url = 'https://5cf15627c936cb001450bd0a.mockapi.io/users2';
    return this.getByURL(url)
      .pipe(
        expand((response: Array<any>) => {
          if (response && response.length && response[0].next) {
              return this.getByURL(response[0].next);
          }
          else {
            return empty()
          }
        }),
        map(obj => obj[0]), 
        reduce((acc, x: any) => acc.concat([x.data]), []),
      );
  }

This will concatenate all data into an array and the recursive HTTP calls will function correctly.

The only issue arises when calling '' because the next URL is http instead of https, causing an HttpError -> ProgressEvent.

Therefore, I started from '' which resolved the issue. Once the backend is corrected to use the proper link, you can revert back to your original request.

Another point to note is that the API result returns an array, not an object, hence why I accessed result[0]

Furthermore, your condition to return empty() was reversed.

Answer 2

I updated the code for you as shown below (updated stackblitz)

  ngOnInit() {
    this.getByPageNext()
      .subscribe(data => {
        console.log(data);
      });
  }

  get(url: string): Observable<any> {
    return this.httpClient
      .get(url)
      .pipe(catchError(this.formatErrors));
  }

  formatErrors(error: any) {
    console.error('error', error);
    return throwError(error.error);
  }

  getByURL(url: string): any {
    return this.get(url);
  }

  getByPageNext(): Observable<any> {
    const url = 'https://5cf15627c936cb001450bd0a.mockapi.io/users2';
    return this.getByURL(url)
      .pipe(
        expand((response: Array<any>) => {
          if (response && response.length && response[0].next) {
              return this.getByURL(response[0].next);
          }
          else {
            return empty()
          }
        }),
        map(obj => obj[0]), 
        reduce((acc, x: any) => acc.concat([x.data]), []),
      );
  }

This will concatenate all data into an array and the recursive HTTP calls will function correctly.

The only issue arises when calling '' because the next URL is http instead of https, causing an HttpError -> ProgressEvent.

Therefore, I started from '' which resolved the issue. Once the backend is corrected to use the proper link, you can revert back to your original request.

Another point to note is that the API result returns an array, not an object, hence why I accessed result[0]

Furthermore, your condition to return empty() was reversed.

Utilizing recursive techniques with expand() and concatMap() in Angular 7

Answer №1

Similar questions

Implement a personalized click function for the delete icon in the mini cart

Acceptable choices for inclusion in .on when utilized as a proxy

Constructor for Mongoose schema not being detected

Is there a way to prevent a web page from refreshing automatically for a defined duration using programming techniques?

Can JavaScript/jQuery be integrated with MySQL/PHP?

Component inside a shared module experiencing issues with router link functionality

"Implementing a Where Clause with Knex.js: Understanding the Necessity of Using Mandatory AND

"Sending an Angular post request results in the transmission of an [object Object

What are the various ways to display time zone in a different format?

Is there a streamlined approach to signal a successful callback to $q.all without the need to define a $q.defer() variable?

Guide to troubleshooting JavaScript in Firefox using Visual Studio 2008?

JS/Apps Script: Passing object and its keys as function parameters

What is the best way to create a reset button for a timing device?

I'm having issues with my pop method - it doesn't seem

Ways to handle display glitches while a user is scrolling

The Check-All checkbox retains the ng-model without any modifications

What is the best way to create a shell script using Node.js?

Retrieving PHP information in an ionic 3 user interface

An improved method for fetching data from the server at regular intervals of x minutes

Guide on exporting values from a Promise within an imported module