title: use RXJS to keep triggering http calls in angular until a condition is met
body: <p>I am making calls to the spotify api which returns an object like so:</p>
  <pre><code>{
    next: 'https://api.spotify.com/v1/me/tracks?offset=100&amp;limit=50'
    items: [...]
  }
  </code></pre>
  <p>where items are the result of the just-made network call and next is the url to use to get the next 'page' of results. What i would like to do is make an initial call with no offset, and then keep making network calls until next is null, meaning the user has no more items left to get. If there are no more items they send back null for next.</p>
  <p>This seems possible but cant seem to figure out how to do it correctly. What I am looking for is something like this:</p>
  <pre><code>  readonly baseSpotifyUrl: string = 'https://api.spotify.com/v1';
  
  constructor(private http: HttpClient) {}
  
  
  public getTracks(url?: string): Observable&lt;any&gt; {
      return this.http.get(url &amp;&amp; url?.length &gt; 0 ? url : `${this.baseSpotifyUrl}/me/tracks?limit=50`);
    }
  
  public getAllTracks(): Observable&lt;any&gt; {
      const tracks$: Subject&lt;any&gt; = new Subject();
      let next: string = '';
      this.getTracks(next)
        .subscribe({
          next: (res: any): void =&gt; {
            tracks$.next(res.items);
            next = res.next;
            // if res.next !== null, do this again now that we have set next to res.next
          },
          error: (err: any): void =&gt; {
            console.error(err);
          }
        });
      return tracks$;
    }
  
  </code></pre>
  <p>The idea here is that my component will call getAllTracks() and receive a subject and then new items will be continuously pushed through that subject until all the items have been retrieved. I cannot seem to figure out how to make a new network request when the previous one returns ONLY IF there are more items to get (res.next !== null)</p>
  <p>EDIT-----------------------------------------------------------</p>
  <p>This gets the job done but I feel that its trash:</p>
  <pre><code>  public getAllTracksSegment(itemsSubject: Subject&lt;any&gt;, nextSubject: Subject&lt;string&gt;, url?: string): void {
      this.http.get(url &amp;&amp; url?.length &gt; 0 ? url : `${this.baseSpotifyUrl}/me/tracks?limit=50`).subscribe({
        next: (res: any): void =&gt; {
          itemsSubject.next(res.items);
          nextSubject.next(res.next);
        }
      });
    }
  
    public getAllTracks(): Observable&lt;any&gt; {
      const tracks$: Subject&lt;any&gt; = new Subject();
      const next$: Subject&lt;string&gt; = new Subject();
      next$.subscribe({
        next: (next: any): void =&gt; {
          if (next !== null) {
            this.getAllTracksSegment(tracks$, next$, next);
          }
        }
      });
      next$.next('');
      return tracks$;
    }
  </code></pre>