Concat paginated response using Rxjs in angular2

Question

I am calling an external API from an angular2 app, which provides data in paginated form. The response looks like this

{
   next: "next_url",
   results: []
}

Can I use Rxjs or inbuilt Http class of Angular2, which returns an observable, to concat the results from next url, till

{
   next: null,
   results: []
}

I feel I need to user concatMap operator, but I have not figured out the syntax as I am new to Reactive Extentions.

Answer 1

Here is how I would do it:

import {Component} from 'angular2/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';

@Component({
  selector: 'my-app',
  template: `<h2>Results: {{out | async | json}}</h2>`,
})
export class App {
  constructor() { 
    this.out = this.getAllResults();
  }

  getAllResults(startIdx = 0) {
    return this.getData(startIdx)
      .concatMap(data => {
        if (data.next) {
          return this.getAllResults(data.next)
            .map(resultsToJoin => [...data.results, ...resultsToJoin]);
        } else {
          return Observable.of(data.results);
        }
      });
  }

  // pretend this is our http call 
  getData(idx : number) {
    const data = [{
        next: 1,
        results: [1, 2]
      }, {
        next: 2,
        results: [3, 4]
      }, {
        next: null,
        results: [5, 6]
    }];

    return Observable.of(data[idx]);
  } 
}

http://plnkr.co/edit/7r4TaW