title: Rx (JS) selectively unsubscribe observables in a flatMap
body: <p>Is there a way to cancel/remove individual observables in a <code>flatMap</code> or <code>concatMap</code> operation before they complete?</p>
  
  <p>I currently have an observable of UI actions that trigger API requests, and I use <code>flatMap</code> for this:</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>actionsFromUI.flatMap(a =&gt; http.request("blah?id=" + a.id))
  </code></pre>
  
  <p>This is then subscribed to render results. A really nice property of this is that if I unsubscribe, all in-progress API requests are automatically cancelled. I don't want to break that.</p>
  
  <p>Now I want to support UI actions that can cancel a <em>particular</em> in-progress request. A UI action can trigger an API request for a particular ID, and then a subsequent UI action can then cancel the API request for that ID.</p>
  
  <p>I hope this dummy code illustrates what I'm trying to do:</p>
  
  <pre class="lang-js prettyprint-override"><code>let actions = [
      { action: "start", id: 1 },
      { action: "start", id: 2 },
      { action: "start", id: 3 },
      { action: "cancel", id: 1 },
      { action: "start", id: 4 },
      { action: "cancel", id: 3 },
      { action: "start", id: 1 }
  ];
  
  Observable.from(actions)
      .flatMap(a =&gt; {
          if (a.action === "start") {
              return http.request("blah?id=" + a.id);
          } else if (a.action === "cancel") {
              // ???
          }
      })
      .subscribe(response =&gt; {
          console.log(response);
      });
  </code></pre>