Can't create 2 independent Observables with forkJoin

Question

I have a function that takes a ID as parameter and makes HTTP calls, depending on the ID. It returns a Observable. I expected the calls with different parameters to be completely independent, but they influence each other.

I use
RxJS 5.0.0-beta.2
Angular 2.0.0-beta.7 for the http calls
Typescript 1.8.2

Code:

getCharacterDetails (id : number) : Observable<CharacterDetails> {
    let keys : SpreadsheetKeys = this.characters[id];
    if (!keys) {
        return null;
    }

    let frontUrl : string = `${BASE_URL}/${CELLS}/${keys.spreadsheetKey}/${keys.frontWorksheetKey}/${OPTIONS}`;
    let backUrl : string = `${BASE_URL}/${CELLS}/${keys.spreadsheetKey}/${keys.backWorksheetKey}/${OPTIONS}`;

    return Observable.forkJoin(

        this.http.get(frontUrl).map(response => response.json()),
        this.http.get(backUrl).map(response => response.json()))

        .map((response : any[]) => {

            let character : CharacterDetails = EMPTY_MODEL;

            console.log(JSON.stringify(character)); // The 1st console.log

            applyFrontSheetToCharacter(response[0], character);
            applyBackSheetToCharacter(response[1], character);

            console.log(JSON.stringify(character)); // The 2nd console.log

            return character;
        });
}

Expected behavior:

I call
getCharacterDetails(1).subscribe((details) => { this.details = details }));
The 1st console.log prints my EMPTY_MODEL.
The 2nd console.log prints the character model for ID 1.

then I call
getCharacterDetails(2).subscribe((details) => { this.details = details });
The 1st console.log prints my EMPTY_MODEL.
The 2nd console.log prints the character model for ID 2.

Actual behavior:

I call
getCharacterDetails(1).subscribe((details) => { this.details = details }));
The 1st console.log prints my EMPTY_MODEL.
The 2nd console.log prints the character model for ID 1.

then I call getCharacterDetails(2).subscribe((details) => { this.details = details });
The 1st console.log prints the character model for ID 1. <- Problem
The 2nd console.log prints the character model for ID 2.

Why are the 2 calls not completely independent? How does the 2nd call even know about the data from the first call?

Could you add a prefix in your console.log? Something like `console.log(number + ': '+JSON...);` To be sure ;-) — Thierry Templier, Mar 15 '16 at 14:17
I added the ID in front of to the console.log like you suggested. Nothing actually changed, the console logs now show:`1: {EMPTY_MODEL}` then `1: {data for ID 1}` then `2: {data for ID1}` then `2: {data for ID2}`. What result where you hoping for? — Manuel Huber, Mar 15 '16 at 14:20
I don't think this is related to the forkJoin, it sounds to be the way you may be handling `EMPTY_MODEL`. — Eric Martinez, Mar 15 '16 at 14:37
Oh my god, you are so right :| What a stupid oversight -.- What's the "best" way to define an empty model so I can initialize variable with it? The EMPT_MODEL looked like this `{name: '', age: 0, ...}` — Manuel Huber, Mar 15 '16 at 14:41
I just made a getEmptyModel methode that returns a CharacterDetails object fully initialized with "empty" data (like empty strings and zeros). — Manuel Huber, Mar 15 '16 at 19:29

score 1 · Accepted Answer · answered Mar 15 '16 at 15:00

1

The problem was simply that I completely misused the EMPTY_MODEL. It was basically a class-wide variable that I was editing in the .map() function. A silly mistake that was unrelated to RxJS, Angular or HTTP

answered Mar 15 '16 at 15:00

Manuel Huber

121
2
14

Can't create 2 independent Observables with forkJoin

1 Answers1