What is the operator to conditionally chain Observables together?

Question

What is the operator to conditionally chain Observables together?

My goal is to extract paginated data from a REST API and integrate it into my Angular application. The structure of the data sent by the API typically looks like this:

{
    "next": null,
    "results": [
        {"id": 7, "name": "Alicia"},
        {"id": 8, "name": "Ted"},
        {"id": 9, "name": "Marshall"}
    ]
}

The next field contains the URL for retrieving the next page of data. Since I don't know in advance how many pages are needed to load all the data, I need a flexible solution.

I have implemented a functional method that retrieves the data and can be viewed in this working example:

public loadPeople( next?:string ): void {
    if(!next) next = 'api/1.json';

    this.http.get(next)
        .pipe(
          map( (response: Response) => response.json())
        )
        .subscribe( (data: any) => {
          this._people = this._people.concat(data.results);
          this._peopleSubject.next(this._people);
          if(data.next) this.loadPeople(data.next);
        })
}

Although my current code works, I believe there might be a more efficient way to achieve this using RxJS operators to chain Observables. If anyone has suggestions on which operator to use or how to improve the code, I would appreciate the help. Thank you!

angular typescript rxjs

Answer 1

Answer №1

To implement this functionality, leverage the power of RxJS operators like concatMap and concat:

public fetchData( endpoint:string ): Observable<string[]> {
    return this.http.get(endpoint)
        .pipe(
          map( (response: Response) => response.json() )
          concatMap((data: any) => {
            if (data.next) {
              return Observable.of(data.results).concat(this.fetchData(data.next));
            }
            return Observable.of(data.results);
          })
        );
}

public fetchItems( endpoint?:string ): void {
    if(!endpoint) endpoint = 'api/1.json';

    this.fetchData(endpoint)
        .subscribe( (items: string[]) => {
            this._items = this._items.concat(items);
            this._itemsSubject.next(this._items);
        })
}

Make sure to include these necessary imports:

import { of } from 'rxjs'
import { concat, concatMap,  map } from 'rxjs/operators';

Answer 2

To implement this functionality, leverage the power of RxJS operators like concatMap and concat:

public fetchData( endpoint:string ): Observable<string[]> {
    return this.http.get(endpoint)
        .pipe(
          map( (response: Response) => response.json() )
          concatMap((data: any) => {
            if (data.next) {
              return Observable.of(data.results).concat(this.fetchData(data.next));
            }
            return Observable.of(data.results);
          })
        );
}

public fetchItems( endpoint?:string ): void {
    if(!endpoint) endpoint = 'api/1.json';

    this.fetchData(endpoint)
        .subscribe( (items: string[]) => {
            this._items = this._items.concat(items);
            this._itemsSubject.next(this._items);
        })
}

Make sure to include these necessary imports:

import { of } from 'rxjs'
import { concat, concatMap,  map } from 'rxjs/operators';

Answer 3

Answer №2

To achieve the same result, you have the option of using Map and Subscribe or MergeMap. Map and subscribe can be implemented as:

this.http.get('/api/people/1')
  .map(res => res.json())
  .subscribe(character => {
    this.http.get(character.homeworld).subscribe(homeworld => {
      character.homeworld = homeworld;
      this.loadedCharacter = character;
    });
  });

}

However, there are two observations to be made from this approach:

Firstly, we are creating a nested pyramid structure with our Observables which can make the code less readable.
Secondly, our two requests were executed sequentially.

Therefore, an alternative method is to use mergemap to iterate over the Observable values, like so:

this.homeworld = this.http.get('/api/people/1')
  .map(res => res.json())
  .mergeMap(character => this.http.get(character.homeworld))

}

Credit goes to ** Cory Rylan** for providing a clear explanation, found at enter link description here

Answer 4

To achieve the same result, you have the option of using Map and Subscribe or MergeMap. Map and subscribe can be implemented as:

this.http.get('/api/people/1')
  .map(res => res.json())
  .subscribe(character => {
    this.http.get(character.homeworld).subscribe(homeworld => {
      character.homeworld = homeworld;
      this.loadedCharacter = character;
    });
  });

}

However, there are two observations to be made from this approach:

Firstly, we are creating a nested pyramid structure with our Observables which can make the code less readable.
Secondly, our two requests were executed sequentially.

Therefore, an alternative method is to use mergemap to iterate over the Observable values, like so:

this.homeworld = this.http.get('/api/people/1')
  .map(res => res.json())
  .mergeMap(character => this.http.get(character.homeworld))

}

Credit goes to ** Cory Rylan** for providing a clear explanation, found at enter link description here

What is the operator to conditionally chain Observables together?

Answer №1

Answer №2

Similar questions

Ways to display Div contents based on selected options in an Angular 2/4 list

The rendering of the list is taking an unexpectedly long time due to random factors

Is it achievable to validate image dimensions using angular forms? Or, how can one go about validating image dimensions through angular forms?

At runtime, the array inexplicably becomes null

Once the data being interpolated undergoes a change, implement a setTimeout function in Angular 7

Angular with Entypo Icons

Tips on streamlining two similar TypeScript interfaces with distinct key names

Creation of Card Component with React Material-UI

Explore an example of using custom controls in a FormArray within an Angular 5 reactive form on StackBlitz

Ways to eliminate toggle event in Angular

Controlling numerous websockets using React

How can I export a function signature in TypeScript?

What are some ways to expand the width of a MaterialUI form control if no value has been chosen?

Deliver Compressed Files following Angular CLI --Prod Configuration

Ways to retrieve the initial 4 elements from an array or class organized by their price entries in ascending order

Attempting to fill a template using ngfor, wherein the initial 2 elements are displayed in a row

Encountered a Webpack issue when trying to load the primeng.min

Can you explain the significance of the colon in this context?

Create collaborative documents with serverless TypeScript extension

Tips for resolving the "Page Not Found" error in your NextJs application