CODEWITHSUNDEEP
angularrxjsrxjs5
saytri
saytri

Reputation: 99

Angular 4 nested http call and merge data

My api returns 20 results in one http call but I want 40 records for the same I am making nested http call as shown below.I am able to fetch 40 records but when I am subscribing to the getALl() method I am getting only 20 results;

getAll() {
    return this._http.get(this.baseURL)
      .do((data: any) => {
        this.nextPage = data.next_page_token;
        var results = data.results;
        return this._http.get(`${this.baseURL}?next=${this.nextPage}`).delay(2000).do((d: any) => {
           return Observable.of(results.concat(d.results));
        });
  });
}

Upvotes: 2

Views: 1365

Answers (2)

Imran
Imran

Reputation: 3072

Another solution is using mergeMap operator

First import the operator:

import 'rxjs/add/operator/mergeMap';

Then you can chain like this

this.http.get(this.baseURL)
            .map((res: Response) => res.json())
            .mergeMap(customer => this.http.get(`${this.baseURL}?next=${this.nextPage}`)
            .map((res: Response) => res.json())
            .subscribe(res => {console.log(res)});

Borrowed from https://stackoverflow.com/a/34107312/1379347

Upvotes: 1

martin
martin

Reputation: 96959

The do() operator is intended to only do side-effects, it doesn't modify the values going through at all.

In your case you can use concatMap() to merge two Observables and map() to modify the emitted value from the inner one:

return this._http.get(this.baseURL)
  .concatMap((data: any) => {
    this.nextPage = data.next_page_token;
    var results = data.results;

    return this._http.get(`${this.baseURL}?next=${this.nextPage}`)
      .delay(2000)
      .map((d: any) => results.concat(d.results));
  });

Upvotes: 6

Related Questions