using flatmap to make nested service call with parameter - json

Question

I am making a service call returning data from json file with a bunch of items but after get all the items i need to make another service call to get the contents of each of the items. I am using a flatmap but i am having some trouble on how to pass in a parameter - when i try it becomes underlined in the code as an error.
This is my data call:
getItems(){
this.itemService.getItemsData().flatMap(
data => {this.items = data;
error => this.errorMessage = <any>error;
return this.itemService.getItemContent();
}).subscribe(data => {
this.itemContent = data;
});
}
when i try passing into...getItemContent(this.items.contentUri) it gives me an error.
getItemsData(){
return this._http.get(url)
.map((res:Response) => res.json())
.map((obj) => Object.keys(obj).map((key)=>{return obj[key]}))
.catch(this.handleError);
}
getItemContent(uri){
return this._http.get(uri)
.map((res:Response) => res.json())
.catch(this.handleError);
}
How should i properly do this so when i get items i could also make a call to get the items contents based on a parameter?
here is a sample of the json structure:
{
Item 1: {
title:....
id:....
content:{
uri:"link"
}
}
}
UPDATE:
getItems(){
this.itemService.getItemsData().flatMap(
data => {this.items = data;
for(let x of data){
var url = x.content.uri;
this.observables.push(this.itemService.getInnerItemData(url));
}
return Observable.forkJoin(this.observables);
}).subscribe(data => {
this.itemsContent = data;
});
}
HTML:
<div *ngFor="let item of items">
{{item.title}}
<div *ngFor="let content of itemsContent">
{{content.infoText}}
</div>
</div>
now within my display the item.title is showing appropriately as expected but the content within each item is showing up as an array of [object][object] and seems like all the itemsContent is showing up for each item and it is not specified with each itemsContent with belonging item.

Answer 1

Use forkJoin to make parallel requests.
getItems(){
this.itemService.getItemsData().flatMap(
data => {
this.items = data;
var observables = [];
for(let x of data){
var url = x.content.uri;
observables.push(this.itemService.getItemContent(url));
}
return Observable.forkJoin(observables);
}).subscribe(data => {
console.log(data);
});
}
Then in your subscribe you will see an array of response for your item contents.
Update
In your view, you can track the items' index and display that indexed items content like this:
<div *ngFor="let item of items; let i = index;">
{{item.title}}
<dic>
{{itemsContent[i]?.infoText}}
</div>
</div>