Rxjs: add data to elements of array returned from http response

Question

Following this question: Add data to http response using rxjs

I've tried to adapt this code to my use case where the result of the first http call yields an array instead of a value... but I can't get my head around it. How do I write in rxjs (Typescript) the following pseudo code?

call my server

obtain an array of objects with the following properties: (external id, name)

for each object, call another server passing the external id

for each response from the external server, obtain another object and merge some of its properties into the object from my server with the same id

finally, subscribe and obtain an array of augmented objects with the following structure: (external id, name, augmented prop1, augmented prop2, ...)

So far the only thing I was able to do is:

    this._appService
        .getUserGames()
        .subscribe(games => {
            this._userGames = _.map(games, game => ({ id: game.id, externalGameId: game.externalGameId, name: game.name }));
            _.forEach(this._userGames, game => {
                this._externalService
                    .getExternalGameById(game.externalGameId)
                    .subscribe(externalThing => {
                        (<any>game).thumbnail = externalThing.thumbnail;
                        (<any>game).name = externalThing.name;
                    });
            });
        });

Thanks in advance

Have a look at these answers stackoverflow.com/questions/40375309/… or stackoverflow.com/questions/40250882/… — martin
– martin, Commented Dec 6, 2016 at 13:13

Etchelon · Accepted Answer · 2016-12-07 00:01:46Z

1

I found a way to make it work. I'll comment the code to better explain what it does, especially to myself :D

this._appService
        .getUserGames() // Here we have an observable that emits only 1 value: an any[]
        .mergeMap(games => _.map(games, game => this._externalService.augmentGame(game))) // Here we map the any[] to an Observable<any>[]. The external service takes the object and enriches it with more properties
        .concatAll() // This will take n observables (the Observable<any>[]) and return an Observable<any> that emits n values
        .toArray() // But I want a single emission of an any[], so I turn that n emissions to a single emission of an array
        .subscribe(games => { ... }); // TA-DAAAAA!

answered Dec 7, 2016 at 0:01

Etchelon

9121 gold badge11 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

slaesh · Accepted Answer · 2016-12-06 13:29:20Z

0

Don't use subscribe. Use map instead. Can't test it, but should look more like this:

this._appService
    .getUserGames()
    .map(games => {
        this._userGames = _.map(games, game => ({ id: game.id, externalGameId: game.externalGameId, name: game.name }));
        return this._userGames.map(game => { /* this should return an array of observables.. */
            return this._externalService
                .getExternalGameById(game.externalGameId)
                .map(externalThing => {
                    (<any>game).thumbnail = externalThing.thumbnail;
                    (<any>game).name = externalThing.name;
                    return game;
                });
        });
    })
    .mergeAll()
    .subscribe(xx => ...); // here you can subscribe..

answered Dec 6, 2016 at 13:29

slaesh

17k6 gold badges53 silver badges54 bronze badges

1 Comment

Etchelon Over a year ago

It doesn't. In subscribe() I get an observable instead of the array of objects. I found 2 solutions, after reading the whole theory about observables on reactivex.io/rxjs (but things are still quite fuzzy). I'll write an answer to show them

Collectives™ on Stack Overflow

Rxjs: add data to elements of array returned from http response

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related