Which operator to chain Observables conditionally?

Viewed 5001

I'd like to load some data, which is paginated, from a REST API, into my Angular app. Typically, the API is sending me data following this structure :

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

Where next is the url to GET/ the next data page request. Obviously, I don't know in advance the number of page I need to iterate to fully load the data.

I wrote the following working code in order fully get the data (Working plunker here) :

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);
        })
}

However, I do lack of experience with Rx.JS and I'm pretty sure there's a better, cleaner way to do it, by chaining Observables using an operator, but I can't put my hand on it.

Any idea of an operator I could use ? Thanks !

2 Answers
Related