AngularFire .subscribe => console.log returning undefined after use of map or flatMap

Question

I'm pretty new to AngularFire, Firebase, rxjs etc..

Can anyone tell me why the following returns 'undefined' from console.log?

    this.af.database.object('/teams/' + this.id)
        .map((data) => {
            data.teamName = Teams[data.team];
        })
        .subscribe((data) => {
            console.log(data)
        })

Teams is an enum. Red = 1, Blue = 2...

I know the problem lies in the .map as if i remove it and just log x or log the enum lookup both work fine..

This works fine (and resolves red):

    this.af.database.object('/teams/' + this.id)
        .subscribe((x) => {
            console.log(Teams[x.team]);
        })

As does this (resolving a firebase observable):

    this.af.database.object('/teams/' + this.id)
        .subscribe((x) => {
            console.log(x);
        })

I've also tried flatMap on a list rather than map on an object.

Any help would be appreciated.

score 0 · Accepted Answer · answered Nov 05 '16 at 19:27

0

Because returns from both get and map methods are observable, not a json.

In

 .map((data) => {
            data.teamName = Teams[data.team];
        })

you treat your data variable like a json but it isn't. So your variable becomes undefined. Because there's no such thing as data.Teamname

Ref: https://angular.io/docs/ts/latest/guide/server-communication.html#!#fetch-data

http.get method returns an Observable of HTTP Responses (Observable) from the RxJS library and map is one of the RxJS operators.

answered Nov 05 '16 at 19:27

eko

39,722
10
72
98

Thanks echonax. That makes sense. I've saw people using toJSON? Is there any way in which I can add to the data like that without losing the ability of using the async pipe? I might be asking the wrong question here, my problem is that the data comes back from the database with a team value of '1', which is correct but not what I want to be displayed on screen. I want to do a reverse lookup on the Teams enum and display it's string. I'm probably handling this all wrong. – Chrissy Semens Nov 05 '16 at 19:41
@ChrissySemens You can `.map((res:Response) => res.json())` and handle the data inside your subscribe. – eko Nov 05 '16 at 19:48
Eternally grateful. Thanks :D – Chrissy Semens Nov 05 '16 at 19:49
@ChrissySemens eheh glad I could help – eko Nov 05 '16 at 19:51

AngularFire .subscribe => console.log returning undefined after use of map or flatMap

1 Answers1