I am encountering a synchronization issue while trying to retrieve an element after making multiple HTTP requests. Below is the code I have posted:
Get function in my service:
get() {
return new Observable(project => {
this.channelsService.get().subscribe(
stations => {
this._stations = stations;
this._stations.forEach((station) => {
station.cssClass = this.channelsService.getCss(station.id.split('/').pop());
station.plstation$thumbnails = this.channelsService.getThumbnails(station.id.split('/').pop());
if (station.plstation$callSign !== '') {
const watchliveUrl = this.watchLiveApi + station.plstation$callSign + '/?schema=1.0.0';
this.http.get(watchliveUrl).subscribe(data => {
const body = data.json();
station.currentListing = body.currentListing;
station.nextListing = body.nextListing;
project.next(stations);
project.complete()
});
}
});
}, (error) => {
this.mapErrorService.mapError(error, 'Listing service (1)');
});
});
}
get() used and subscribe:
constructor(private listingService: ListingService) {
this.listingService.get().subscribe((stations) => {
this.stripDetails.channelList = stations;
// stations[6].currentListing Not undefined
console.log(stations);
// Now is undefined
console.log(stations[6].currentListing);
}); }
How can I set define stations[6].currentListing?