Observable scope change in method called by map operator

Question

I was trying to change my data before returning it in the method called by map operator and i found out that all my other variable outside of that method are undefined

I wrote a simple code down here to represent what i mean, the logged test variable is returned as undefined:

import {Observable} from "rxjs/Observable";
import {Injectable} from "@angular/core";
import {Http, Response} from "@angular/http";

@Injectable()
export class DataService {
    private API_URL= 'url...';
    private test = 1;

    constructor(private http: Http) {}

    getData(): Observable<any> {
        return this.http.get(this.API_URL)
            .map(this.extractData)
            .catch(this.handleError);
    }

    private extractData(res: Response) {
        let body = res.json();
        console.log(test);
        return body.data || {};
    }
}

I wanted to know why this is happening and if it's not the way to change fetched data how can i do it in the service (not in the subscriber component because i want to change data based on another variable that has nothing to do with subscriber component)

Answer 1

That's a JS "feature" ;-)

You need to use .bind(this)

    return this.http.get(this.API_URL)
        .map(this.extractData.bind(this))
        .catch(this.handleError.bind(this));

or arrow functions

    return this.http.get(this.API_URL)
        .map(val => this.extractData(val))
        .catch(err => this.handleError(err));

to retain the scope of this