title: Angular 2 chained Http Get Requests with Iterable Array
body: <p>Looking for help with an Observable http sequence, I want to make two http calls to an api, the second dependent on the first. The first returns an Array of Urls, and the second makes get requests for every url in that array and then returns the responses on the stream. If I hard code in one of the dependent request like so I get back one of the titles I am looking for:</p>
  
  <pre><code>search(character): Observable&lt;any&gt; {
  let that = this
  let queryUrl: string = character.url;
  return this.http.get(queryUrl)
    .map((response: Response) =&gt; {
      this.characterResults = response.json().films
      return this.characterResults
          //Example response: 
          // ["https://api.com/films/1", "https://api.com/films/2", "https://api.com/films/3", "https://api.com/films/4"]
    })
    .flatMap((film) =&gt; {
      return that.http.get(film[0])
      .map((response: Response) =&gt; {
        return response.json().title
      })
    })
  }
  
  getApiData(character) {
      this.apiService.search(character)
      .subscribe((results) =&gt; { // on sucesss
            console.log(results)
          },
          (err: any) =&gt; { // on error
            console.log(err);
          },
          () =&gt; { // on completion
            console.log('complete')
          }
        );
  </code></pre>
  
  <p>but any attempt to iterate using forEach over that array and then make all the http calls gives me this error:</p>
  
  <pre><code>browser_adapter.js:84 EXCEPTION: TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined
  </code></pre>
  
  <p>Ideally, I would like an elegant way to make those subsequent calls in parallel with the result array from the first call, but I cannot seem to figure out which of rxJs's dozens of methods could help me do it.  Can anyone offer me any help?</p>