How to do a async HTTP request inside an Angular2 loop/map and modify the original loop array?
<p>New to Angular2 here and wondering how to do this async request on array pattern (not so sure about the pattern name). </p>

<p>So let's say I use Angular2's <code>Http</code> to get a YouTube Playlist that contains <code>videoId</code> in each return item. Then I need to loop through this item with the <code>videoId</code> and do another request to YouTube to get the individual video information. This can be another common HTTP request, get the list then loop through the list and get the details of every individual item. </p>

<pre class="lang-js prettyprint-override"><code>let url = [YouTube API V3 list url]
let detailUrl = 'https://www.googleapis.com/youtube/v3/videos?part=contentDetails,statistics';

this.http.get(url)
    .map(res =&gt; res.json())
    .subscribe(data =&gt; {
        let newArray = data.items.map(entry =&gt; {

            let videoUrl = detailUrl + '&amp;id=' + entry.id.videoId + 
                                       '&amp;key=' + this.googleToken;

            this.http.get(videoUrl)
                .map(videoRes =&gt; videoRes.json())
                .subscribe(videoData =&gt; {
                     console.log(videoData);

                     //Here how to I join videoData into each item inside of data.items. 
                });
    });
});
</code></pre>

<p>So the above code does work. But I still have these two questions: </p>

<ol>
<li><p>How do I join the <code>videoData</code> back to <code>data.items</code> and make sure the correct item inside the <code>data.items</code> is joined with the correct <code>videoData</code> (the <code>videoData</code> that is using the <code>entry.id.videoId</code> of the related item inside <code>data.items</code>) and create that new <code>newArray</code>?</p></li>
<li><p>How do I know when everything is done and do something based on all the data after all the async requests have finished? </p></li>
<li><p>The newArray keep the same order of the first HTTP request. As the first HTTP hit the YouTube search list API with order by viewCount. Simply nest observable like above will not keep the original order. </p></li>
</ol>

<p><strong>UPDATE</strong></p>

<p>With inoabrian solution, I can successfully achieve the above three points. But when I call the myvideoservice again (like changing the url as new NextPageToken), the Subject - this._videoObject has 2 observers. And load again, it has 3 observers and so on. I need a way to reset the Subject to have only 1 observers so I won't have duplicate videos. Is it a best practice way to clear/reset subject? </p>