title: How to wait for subscriptions inside a for loop to complete before proceeding
body: <p>I have a subscription inside of a for loop that fetches JSON data as a series of "category data" from an external source, then filters that data based on the users current location. What I need is to wait for all of the subscriptions to complete, and then and only then can my app proceed. Right now, it does not wait for all of the subscriptions to complete, it only completes a few, and then proceeds, while the other subscriptions continue in the background.</p>
  
  <p>I've tried the following "brute force" method, where i know a certain number of categories will be added to the filtered array, and it works, but I don't know how to make it work for any situation.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>getMultipleCategoryData(categoryIds: string[]) {
  for (let i = 0; i &lt; this.waypointIds.length; i++) {
  //after user selects their categories, its added to waypointNames, and occurences() gets the # of occurences of each waypoint name
    let occurences = this.occurences(this.waypointNames[i], this.waypointNames);
    this.categoryApi.getCategoryData(this.waypointIds[i]).toPromise().then(data =&gt; {
  
      let filteredLocs = data.locations.filter(loc =&gt; this.distanceTo(loc, this.hbLoc) &lt; MAX_RADIUS);
      let foundLocs = [];
      //fill filteredLocs with first n, n = occurences, entries of data 
      for (let n = 0; n &lt; occurences; n++) {
        if (filteredLocs[n] != undefined) {
          foundLocs[n] = filteredLocs[n];
        }
      }
      //find locations closest to hbLoc (users current location), and add them to waypoints array
      for (let j = 0; j &lt; foundLocs.length; j++) {
        for (let k = 0; k &lt; filteredLocs.length; k++) {
          if (this.distanceTo(this.hbLoc, filteredLocs[k]) &lt; this.distanceTo(this.hbLoc, foundLocs[j]) &amp;&amp; foundLocs.indexOf(filteredLocs[k]) &lt; 0) {
            foundLocs[j] = filteredLocs[k];
          }
        }
      }
      if (foundLocs.length &gt; 0 &amp;&amp; foundLocs.indexOf(undefined) &lt; 0) {
        for (let m = 0; m &lt; foundLocs.length; m++) {
          this.waypointLocs.push(foundLocs[m]);
        }
      }
    }).then(() =&gt; { 
      //this hardcoded, brute force method works, but i'd need it to be more elegant and dynamic
      if (this.waypointLocs.length &gt;= 5) {
        let params = { waypointLocs: this.waypointLocs, hbLoc: this.hbLoc };
        this.navCtrl.push(MapPage, params);
      }
    });
  }
  }
  </code></pre>
  
  <p>And the categoryApi.getCategoryData method:</p>
  
  <pre><code>getCategoryData(categoryId): Observable&lt;any&gt; {
      // don't have data yet
      return this.http.get(`${this.baseUrl}/category-data/${categoryId}.json`)
          .map(response =&gt; {
              this.categoryData[categoryId] = response.json();
              this.currentCategory = this.categoryData[categoryId];
              return this.currentCategory;
          });
  }
  </code></pre>
  
  <p>Everything is working fine except waiting for the subscriptions to complete, I'd really like a way to determine when all of the subscriptions have completed. Any help is appreciated!</p>