title: Sequential observables in promise-like style
body: <p>Exploring observables, I've run into a problem where I need to execute functions only after another function has been completed. All functions are async operations that use the <code>Http</code> service in <code>@angular/http</code>.</p>
  
  <p>The call chain should be</p>
  
  <ol>
  <li>Check if playlist exists. If playlist doesn't exist, create it.</li>
  <li><code>GET</code> recommended tracks</li>
  <li>Add recommended tracks to playlist</li>
  </ol>
  
  <p>Normally, I would've written this with promises and have a chain that would look something like</p>
  
  <pre><code>this.checkIfPlaylistExists()
      .then((exists) =&gt; {
          if(!exists) {
              return this.createPlaylist();
          }
      })
      .then(() =&gt; this.getRecommendedTracks(seedTracks)) //resolves tracks
      .then(this.addRecommendedTracksToPlaylist)
      .then(doSomethingElse)
      .catch();
  </code></pre>
  
  <p>My confusion is how I would write the code using observables instead. What I have so far isn't working 100%, and looks like this</p>
  
  <pre><code>  createRecommendedTracksPlaylist(seedTracks: Track[]) {
      this.checkIfPlaylistExists()
        .map(exists =&gt; {
          if (!exists) {
            return this.createPlaylist();
          }
        })
        .map(() =&gt; this.getRecommendedTracks(seedTracks))
        .map((tracks) =&gt; this.addRecommendedTracksToPlaylist(tracks)) //&lt;--- if I comment out this line, 'getRecommendedTracks' is executed and prints out response
        .mergeAll()
        .subscribe();
    }
  </code></pre>
  
  <p>The functions called</p>
  
  <pre><code>getRecommendedTracks(seedTracks: Track[]) {
      seedTrackIds = seedTracks.map((track) =&gt; track.id).join(',');
      const recommendationsUrl = `https://api.spotify.com/v1/recommendations?seed_tracks=${seedTrackIds}`;
      return this.http.get(recommendationsUrl, options).map((res) =&gt; {
        const recommendedTracks = res.json().tracks as Array&lt;Track&gt;;
        console.log('Getting recommended tracks'); //Is only run if I don't run 'addRecommendedTracksToPlaylist' function
        console.log(recommendedTracks);
        return recommendedTracks;
      });
  }
  
  addRecommendedTracksToPlaylist(tracksToAdd) {
      console.log('Going to add tracks..');
      console.log(tracksToAdd); //Prints out 'Observable {_isScalar: false, ... }'
      const options = this.getAuthHeader();
      const playlistUri = '2OGx5l1ItjzMsQdQ0Hec6g';
      const addTracksUrl = `https://api.spotify.com/v1/users/${this.userId}/playlists/${playlistUri}/tracks`;
      return this.http.get(addTracksUrl, options);
  }
  </code></pre>
  
  <p><strong>Edit</strong>: Adding the <code>checkIfPlaylistExists</code> code (please not that the playlist currently always exists)</p>
  
  <pre><code>  private checkIfPlaylistExists() {
      const options = this.getAuthHeader();
      const playlistUrl = `https://api.spotify.com/v1/users/${this.userId}/playlists`;
      return this.http.get(playlistUrl, options).map((res) =&gt; {
        const playlists = res.json().items as Array&lt;any&gt;;
        return playlists.some((e, i, a) =&gt; {
          return e.name.indexOf(this.playlistTitle) &gt; -1;
        })
      });
    }
  </code></pre>
  
  <p>So to sum it up</p>
  
  <ul>
  <li>How would one write a sequential execution order like this using observables?</li>
  <li>Why is the function <code>getRecommendedTracks</code> only executed if I <strong>don't</strong> let the function <code>addRecommendedTracksToPlaylist</code> run in the 'chain'?</li>
  <li>Have I completely misunderstood the <code>Observable.map</code> function? All examples I've looked at use it for single objects as well as arrays, but I'm not sure I'm using it correctly.</li>
  </ul>