Making http requests inside a for loop ANGULAR JS 2 - xmlhttprequest

Question

I am trying to work with the youtube API.
In order to get the icons for the first nth videos I have to make a request.
I was thinking to make a for loop and inside that loop there would be the request.
The problem with this approach is that I am getting the responses with the wrong order and completely random.
So my question :
is there a way to make a for loop wait for a response? I am also able to work with the RxJS operators but I don't know what I should search for
Thanks in advance

Answer 1

You could leverage the Observable.forJoin method. In this case, the "global" callback will be called when all requests have ended.
Here is a sample:
Observable.forkJoin([
this.http.get('/req1').map(res => res.json()),
this.http.get('/req2').map(res => res.json()),
(...)
]).subscribe(results => {
// Called when all requests have ended
var result1 = results[0];
var result2 = results[1];
(...)
});
In your particular use case, you can leverage in addition the flatMap operator:
this.http.get('/videos').map(res => res.json())
.flatMap(videos => {
return Observable.forkJoin(videos.map((video) => {
return this.http.get(`/video/${video.id}/icon`)
.map(res => res.json());
});
}).subscribe(results => {
// all icons received here
});

Answer 2

So I ended up using something like this.
searchVideo( videoIdArray ) {
let observableBatch = [];
let data;
let i;
let videosTempArray: Array<Video>=[];
for(i=0;i<videoIdArray.length;i++){
let videoTemp: Video= {};
videosTempArray.push(videoTemp);
}
videosTempArray.forEach(( videoTemp, key ) => {
observableBatch.push( this.http.get(BASE_URL_VIDEO + '?part=statistics%2Csnippet' + '&id=' + videoIdArray[key].videoId + '&key=' + API_TOKEN)
.map((res: Response) => {
res.json();
// console.log(key);
data = res.json();
videosTempArray[key].channelId=data.items[0].snippet.channelId;
videosTempArray[key].tags=data.items[0].snippet.tags;
videosTempArray[key].views=data.items[0].statistics.viewCount;
videosTempArray[key].likes=data.items[0].statistics.likeCount;
videosTempArray[key].dislikes=data.items[0].statistics.dislikeCount;
return videosTempArray[key];
}
)
);
});
return Observable.forkJoin(observableBatch);
}
thanks for the help!!!