角2鏈接的HTTP GET與幫助，可迭代陣

Question

尋求與可觀察到的HTTP請求序列，我希望有兩個HTTP調用的API，第二取決於第一。第一個返回一個Url數組，第二個返回該數組中每個url的請求，然後返回流中的響應。如果我硬編碼像，所以我回來了變化的要求的一個標題之一，我在尋找：

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') 
     } 
    ); 

但任何企圖使用的forEach在該數組迭代，然後讓所有的HTTP調用給我這個錯誤：

browser_adapter.js:84 EXCEPTION: TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined 

理想情況下，我想一個優雅的方式，使在第一次調用的結果陣列並行的後續調用，但我似乎無法找出哪些rxJs的幾十種方法可以幫助我做到這一點。任何人都可以給我任何幫助嗎？

Answer 1

兩種方式，如果您希望每個結果進行單獨流然後flatMap是你的朋友。你可以用它來拉平任何事情，Arrays，Promises，或Observables。你的情況，你可以通過做起來鏈要求：

search(character): Observable<any> { 
    return this.http.get(character.url) 
    .flatMap((response: Response) => response.json().films) 
    .flatMap((film: string) => this.http.get(film), 
      (_, resp) => resp.json().title) 
} 

getApiData(character) { 
    this.apiService.search(character) 
     .subscribe((results) => { // on sucesss 
      //Called for each url result 
      console.log(results) 
     }, 
     (err: any) => { // on error 
      console.log(err); 
     }, 
     () => { // on completion 
      console.log('complete') 
     } 
    ); 

或者您可以使用forkJoin而是返回結果

return this.http.get(character.url) 
    .flatMap((response: response) => 
      //Waits until all the requests are completed before emitting 
      //an array of results 
      Observable.forkJoin(response.json().files.map(film => 
       this.http.get(film).map(resp => resp.json().title) 
      )); 

編輯陣列1

爲了解決第二個參數flatMap更完全。它是一個函數，它接收傳遞給第一個選擇器方法的原始值與來自展平操作的結果配對。那就是說，如果選擇器1收到a並返回的[1, 2, 3]。第二個選擇器將被調用3次，參數（a，1），（a，2）和（a，3）。

如果你想獲得多個值我會建議你使用輔助映射操作，以保持流潔淨，但它是由你。

.flatMap((film: string) => this.http.get(film), 
     (film: string, resp: Response) => resp.json()) 
//Typescript's destructuring syntax, extracts the values you want 
//and creates a new object with only those fields 
.map(({date, title}) => ({date, title}));