title: How to chain API calls in rxJs subscribe and map with Angular?
body: <p>I'm performing multiple API calls. One creates a User and the second Creates a Team. </p>
  
  <p>User creation returns a <code>UserId</code>, which is then used as part of the Team creation.</p>
  
  <p>I'm using rxjs library with Angular, using the .map and .subscribe methods to wait until the first call is resolved, then pass the UserId to the second api call.</p>
  
  <p>The first call is resolving and returning the <code>UserId</code> I need, but the second isn't even sending. </p>
  
  <pre><code>    this.http.post&lt;number&gt;(this.baseUrl + 'api/register/', UserTeam, {
        headers: new HttpHeaders({
          "Content-Type": "application/json"
        })
      })
        .map(response =&gt; response)
        .subscribe(result =&gt;
        //result = the new user id from registering new user
        {
          var newTeam = JSON.parse(UserTeam);
          newTeam.userId = result;
          newTeam = JSON.stringify(newTeam);
          this.http.post(this.baseUrl + 'api/team/', newTeam, {
            headers: new HttpHeaders({
              "Content-Type": "application/json"
            })
          }).map(result =&gt; result)
        })
  </code></pre>
  
  <p>I've debugged and when the URL is built, it should be hitting my endpoint, and the body I'm sending with it is successful on the URL when tested on postman, I'm not sure why the call isn't sending.</p>
  
  <p>It seems to me that it should make the second API call.</p>
  
  <p>I've tried using <code>.pipe</code> and then <code>.map</code>, but this doesn't work either.</p>
  
  <p>When debugging the code it navigates through both calls, and the second <code>.map(result =&gt; result)</code> contains the same id returned from the <code>response =&gt; response</code>.</p>
  
  <p>This makes me think I can only make one API call before unsubscribing, can anyone provide any clarity on this.</p>