title: How to fetch multiple pages with an Observable in Angular?
body: <p>So I try it in many ways but didn't find out. All help welcome; I discover Angular and RxJs.</p>
  
  <p>I have a service that fetch ressources on many URL of the swapi API. I don't know in advance how many pages will be fetched. So I use <code>concat</code> for every <code>http.get(url)</code> to create an observable.<br>
  Currently, only the first page of data is added to the component (i.e. <code>firstPage</code>); all the requests are sent.</p>
  
  <pre><code>export class PeoplesService {
    urlSource = "https://swapi.co/api/people/";
    pageResponse: GeneralResponse&lt;People&gt;;
    fullResponse: Observable&lt;GeneralResponse&lt;People&gt;&gt;;
  
    constructor(private _http:HttpClient) {
    }
  
    getPaged(n: number): string {
      return this.urlSource + "?page=" + n;
    }
  
    fetch(): Observable&lt;GeneralResponse&lt;People&gt;&gt; {
      let firstPage = this._http
                        .get&lt;GeneralResponse&lt;People&gt;&gt;(this.urlSource);
      firstPage.subscribe(page =&gt; {
        this.fullResponse = firstPage; // first page fetched
        let pageToDownload = Math.ceil(page.count / page.results.length);
        for(let i=2; i&lt;=pageToDownload; i++) {
          // Merge all observable (so all request) into one
          concat(this.fullResponse,
                 this._http.get&lt;GeneralResponse&lt;People&gt;&gt;(this.getPaged(i)));
        }
      });
      return this.fullResponse;
    }
  }
  </code></pre>
  
  <p>Then the basic code for my component is the following :</p>
  
  <pre><code>  ngOnInit() {
      this.peoplesService.fetch().subscribe(r =&gt; this.movies = r.results);
      // a sort of fetch().onNextFetch(this.movies.push(...r.results)) seems better in this case
      // because every data on each pages need to be merged into this.movies
      // or sort of fetch().subscribeUntilCompleted(r =&gt; this.peoples = r.results) needed I guess
    }
  </code></pre>
  
  <p>I haven't found what could be used instead of subscribe (such as a <em>subscribe when Observable has returned everything and collected it all</em>...).  </p>
  
  <p>I guess subscribe does not wait for the status "onCompleted" of the Observable and is not called every time to get all returned values. So how do you fetch all datas ?</p>
  
  <p>Is there something to make the Observable act like a stream and pipe it to <code>this.peoples.push(...r.results)</code> ? I don't know if I am on the right track.</p>