Comment faire une boucle sur un observable dans Angular 4

Question

J'ai un tableau de sections et j'essaie d'obtenir et d'afficher tous les éléments sous chaque section. Cela semble être une prise assez simple. Voici mon code:

//my ngOnInit call this function 
this.sectionService.GetItemList(this.selectedSectionList, this.culture)  
     .subscribe(
      (itemList: ItemBySection[]) => { 
       this.itemBySection = itemList; 

       this.loaded = true; 
      }, 
      (error: any) => this.errorMessage = error,() => 
console.log("loaded") 
     ); 

//this is my function in my service 
public GetItemList(SectionItems: Sections[], strCulture): Observable<ItemBySection[]> { 

    let resultObservable 
    for (var SectionItem in SectionItems) { 
     let url = environment.portalWebServiceURL + "api/section/" + SectionItems[SectionItem].sectionItemID.toString() + "/" + strCulture; 
     resultObservable = this.http.get(url) 
      .catch(this.handleError) 
      .mergeMap(res => <ItemBySection[]>res.json()); 
    } 

    return resultObservable; 

} 

Peut-être que mon explication ci-dessus était pas trop claire Donc ce que je suis en train de faire est d'appeler mon service web plusieurs fois dans une boucle et concaténer le résultat dans une liste. Peut-être que cela aidera.

for all my sectionIDs { 
    call url web service with sectionID 
    receive results from server 
    add the results in my item array 
} 
finally display all items. 

J'espère que cette aide.

Answer 1

Probablement le problème est votre flux http: res.json() renvoie le corps de la réponse analysée comme json. Vous devriez donc utiliser l'opérateur .map(), pas l'opérateur .mergeMap(). La première applique simplement la fonction de transformation à chaque donnée de flux et canalise le résultat (et c'est ce dont vous avez besoin), la dernière projette toutes les valeurs d'une observable dans votre flux (et ce n'est pas ce dont vous avez besoin).

Quelques références:

• flatMap (qui est l'un alias de mergeMap): https://xgrommx.github.io/rx-book/content/observable/observable_instance_methods/flatmap.html
• Carte: https://xgrommx.github.io/rx-book/content/observable/observable_instance_methods/map.html

Hope it helps :)

** MISE A JOUR * *

Ok, j'ai mal compris vos besoins: vous devez d joindre toutes les réponses http dans un tableau de réponses. Vous pourriez faire quelque chose comme ça:

public GetItemList(SectionItems: Sections[], strCulture): Observable<ItemBySection[]> { 
    const resultObservables = [] 
    for (var SectionItem in SectionItems) { 
     let url = environment.portalWebServiceURL + "api/section/" + SectionItems[SectionItem].sectionItemID.toString() + "/" + strCulture; 
     const response = this.http.get(url) 
      .catch(this.handleError) 
      .map(res => <ItemBySection>res.json()); 
     resultObservables.push(response) 
    } 
    return Observable.forkJoin(resultObservables); 
} 

J'ai écrit ce code directement ici, donc il ne fonctionne pas, mais l'idée derrière elle devrait être ce que vous avez besoin :)