Angular 4 nested http call and merge data

Question

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

martin · Accepted Answer · 2018-01-14T10:53:25.297

6

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

edited Jan 14 '18 at 10:53

answered Jan 14 '18 at 10:49

martin

93,354
25
191
226

Still I am getting 20 records – saytri Jan 14 '18 at 10:52
I moved delay to first http get now I am getting 40 results – saytri Jan 14 '18 at 10:54
The `delay` can't have any effect on the values. The final array was just delayed by 2s. – martin Jan 14 '18 at 10:55

Imran · Answer 2 · 2018-01-14T11:11:33.573

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

Angular 4 nested http call and merge data

2 Answers2