title: Angular Recursive HTTP Request results in infinite loop
body: <p>I'm having a very hard time implementing a recursive HTTP request functionality in an Angular application using HttpClient.</p>
  <p>I have an API that serves some data for me. The API puts the data into pages, meaning that the first response contains a URL to the next page and so on. (it's a search request to the public HAPI FHIR server)</p>
  <p>I found this link online explaining how I can achieve this, but it does not work for me:
  <a href="https://medium.com/angular-in-depth/rxjs-understanding-expand-a5f8b41a3602" rel="nofollow noreferrer">https://medium.com/angular-in-depth/rxjs-understanding-expand-a5f8b41a3602</a></p>
  <p>This is what I got at the moment:</p>
  <p>In my service class:</p>
  <pre><code>getFhirVitalSigns(patientId: string): Observable&lt;any&gt; {
  
      let url = this.vitalSignsUrl + &quot;?subject:Patient=&quot; + patientId;
  
      console.log(&quot;Starting process for getting all vital signs&quot;)
  
      return this.getPage(url).pipe(
        expand(({next}) =&gt; next ? this.getPage(next) : empty()),
        concatMap(({content}) =&gt; content)
      );
    }
  
    getPage(url:string): Observable&lt;{
      content: any[];
      next: string | null;
    }&gt; {
      return this.http.get(url).pipe(
        map((response:any) =&gt; ({
          content: response.entry,
          next: this.getNextPage(response)
        }))
      );
    }
  
    getNextPage(response: any): string | null {
  
      let url: string | null = null;
  
      for (let link of response.link){
        if (link.relation = &quot;next&quot;){
           url = link.url;
        }
      }
  
      console.log(&quot;Found new page: &quot; + url);
  
      return url;
  
    }
  </code></pre>
  <p>And this is the code snippet where I call my service method:</p>
  <pre><code>this.vitalSignsService.getFhirVitalSigns(this.patientId!).subscribe(
    (test) =&gt; console.log(test)
  );
  </code></pre>
  <p>The problem now is: the code ends in an infinite loop. It looks like that the code does not realize when there is no new page anymore.</p>
  <p>Can someone help me?</p>
  <p>This is how the pages look like:</p>
  <pre><code>{
      &quot;resourceType&quot;: &quot;Bundle&quot;,
      &quot;id&quot;: &quot;67ea2654-e1a6-4d21-b242-66c99024df64&quot;,
      &quot;meta&quot;: {
          &quot;lastUpdated&quot;: &quot;2020-09-02T19:32:30.124+00:00&quot;
      },
      &quot;type&quot;: &quot;searchset&quot;,
      &quot;total&quot;: 30,
      &quot;link&quot;: [
          {
              &quot;relation&quot;: &quot;self&quot;,
              &quot;url&quot;: &quot;http://hapi.fhir.org/baseR4/Observation?_count=1&amp;subject%3APatient=1457293&quot;
          },
          {
              &quot;relation&quot;: &quot;next&quot;,
              &quot;url&quot;: &quot;http://hapi.fhir.org/baseR4?_getpages=67ea2654-e1a6-4d21-b242-66c99024df64&amp;_getpagesoffset=1&amp;_count=1&amp;_pretty=true&amp;_bundletype=searchset&quot;
          }
      ],
      &quot;entry&quot;: [
          {
              &quot;fullUrl&quot;: &quot;http://hapi.fhir.org/baseR4/Observation/1457319&quot;,
              &quot;resource&quot;: {
                  // actual data of first data item
              }
      ]
  }
  </code></pre>