Seeking assistance with an Observable http sequence that involves making two dependent http calls to an api. The first call returns an Array of Urls, and the second call makes get requests for each url in the array and then returns the responses on the stream. If I hard code one of the dependent requests, I can successfully retrieve one of the titles I need:
search(character): Observable<any> {
let that = this
let queryUrl: string = character.url;
return this.http.get(queryUrl)
.map((response: Response) => {
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) => {
return that.http.get(film[0])
.map((response: Response) => {
return response.json().title
})
})
}
getApiData(character) {
this.apiService.search(character)
.subscribe((results) => { // on sucesss
console.log(results)
},
(err: any) => { // on error
console.log(err);
},
() => { // on completion
console.log('complete')
}
);
However, trying to iterate over the array using forEach and make all the http calls simultaneously results in this error:
browser_adapter.js:84 EXCEPTION: TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined
Ideally, I am looking for a refined approach to make those subsequent calls in parallel with the result array from the first call. Unfortunately, I am having difficulties identifying which RxJS method could assist me. Any guidance or suggestions would be greatly appreciated.