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 !