Dependent and parallel requests through Observables in ng2
<p>I am putting together an application that displays information about 'Modyules' (on a course) that it has to pull via two http.gets (I have no control over the apis unfortunately):</p>

<ol>
<li>Gets the list of Modyule.ids - need to store the id</li>
<li>For each Modyule.id another http.get to get the Modyule.name</li>
</ol>

<p>In my modyule.component.ts, I have:</p>

<pre><code>this.modyuleService.getModyules()
     .subscribe(
          modyules =&gt; this.modyules = modyules,
          error =&gt;  this.errorMessage = &lt;any&gt;error
     );
</code></pre>

<p>In my modyule.service.ts, I have:</p>

<pre><code>getModyules (): Observable&lt;Modyule[]&gt; {
        return this.http.get(listOfModyuleIdsUrl + '.json')
            .map(this.getModyulesDetails)
            .catch(this.handleError);
    }
</code></pre>

<p>But the getModyuleDetails is where I am struggling. This is where I have got to so far, mainly based on:</p>

<p><a href="http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http" rel="nofollow noreferrer">http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http</a> </p>

<p>and looking at, but not seeing how I can apply:</p>

<p><a href="https://stackoverflow.com/a/35676917/2235210">https://stackoverflow.com/a/35676917/2235210</a></p>

<pre><code>private getModyulesDetails = (res: Response) =&gt; {  // instance method for defining function so that the this.http below refers to the class.
    let listOfModyules = res.json();
    let modyulesToReturn = [];

    for (let individualModyule of listOfModyules){
        let tempModyule = new Modyule;
        tempModyule.id = individualModyule.id;

        this.http.get(individualModyuleUrl + individualModyule.id + '.json')
            .map((res: Response) =&gt; res.json()))
            .subscribe(res =&gt; {
                tempModyule.name = res.name
                modyulesToReturn.push(tempModyule);
            });
        }
    return modyulesToReturn;      
}
</code></pre>

<p>Now this is working on my local machine where I have mocked up the .json responses as static .json files..but, when I'm dealing with the real api, I can't rely on the http.gets in the for loop to have completed before returning modyulesToReturn.</p>

<p>I've had a couple of attempts at forkJoin but don't see how I can combine this with the requirement to capture the Modyule.id from the first http.get.</p>

<p>I'd be very grateful for any pointers for how to do parallel requests which depend on an initial request and yet be able to combine data from both.</p>

<p>EDIT in reponse to discussion with @Matt and @batesiiic:</p>

<p>So, picking up on @batesiiic's suggested rewrite of getModyulesDetails to return a Subject, the problem I can't get my head around is how to populate the Modyule.id in the first call and then the Modyule.name in the second call (which doesn't return any reference to the Modyule.id) ie:</p>

<pre><code>private getModyulesDetails = (res: Response) =&gt; {  // instance method for defining function so that the this.http below refers to the class.
    let listOfModyules = res.json();
    let modyulesToReturn = [];
    let calls = [];

    for (let individualModyule of listOfModyules){
        /* I REALLY NEED TO POPULATE Modyule.id HERE */
        calls.push(
            this.http.get(individualModyuleUrl + individualModyule.id + '.json')
                .map((res: Response) =&gt; res.json()))
        );
    }

    var subject = new Subject&lt;Modyules[]&gt;();

    Observable.zip.apply(null, calls).subscribe((modyules: Modyules[]) =&gt; {
        var modyulesToReturn = [];
        modyules.forEach(modyule =&gt; {
            let tempModyule = new Modyule;
            /*I COULD POPULATE Modyle.name HERE BUT IT WON'T MATCH THE Modyule.id SET ABOVE - EXCEPT BY LUCK*/
            modyulesToReturn.push(tempModyule);
        }
        subject.next(modyulesToReturn);
    });

    return subject;      
}
</code></pre>

<p>I think I need to make the calls one by one in the for loop but somehow wait until they have all responded before returning the modyulesToReturn? </p>