title: Angular2 RxJS calling class function from map function
body: <p>I'm new to Angular 2 and Observables so I apologise if my problem is trivial. Anyway I'm trying to test the Angular 2 HTTP Client using RxJS. Although I got it to work I need to add more logic to the service I'm currently working on. Basically I'd like to have a mapping function to convert the object I receive from the web service I'm connected to, to the model object I have in Angular.</p>
  
  <p>This is the code that works:</p>
  
  <pre><code>import { Injectable } from 'angular2/core';
  import { Http, Response } from 'angular2/http';
  import { Observable } from 'rxjs/Observable';
  
  import { Person } from '../models/person';
  
  @Injectable()
  export class PersonsService {
  
      constructor(private http: Http) { }
  
      private personsUrl = 'http://localhost/api/persons';
  
      getPersons(): Observable&lt;Person[]&gt; {
          return this.http.get(this.personsUrl)
              .map(this.extractData)
              .catch(this.handleError);
      }
  
      private extractData(res: Response) {
          if(res.status &lt; 200 || res.status &gt;= 300) {
              throw new Error('Bad response status ' + res.status);
          }
  
          let body = res.json();
          return body.data || {};
      }
  
      private handleError(error: any) {
          let errMsg = error.message;
          return Observable.throw(errMsg);
      }
  }
  </code></pre>
  
  <p>With the above code I have no problems whatsoever. The issue I'm having is that I'd like to map the object I'm getting from the service to the one I have in Angular i.e. <code>Person</code>. What I tried is to call another function from the <code>extractData</code> function that's being used by the <code>.map</code> function.</p>
  
  <pre><code>private extractData(res: Response) {
      if(res.status &lt; 200 || res.status &gt;= 300) {
          throw new Error('Bad response status ' + res.status);
      }
  
      let body = res.json();
      // map data function
      var data = this.mapData(body.data);
  
      return data || {};
  }
  
  private mapData(data: any) {
      // code to map data
  }
  </code></pre>
  
  <p>Obviously the code above doesn't work as when <code>this</code> is referenced inside the <code>extractData</code> function, <code>this</code> does not refer to the <code>PersonsService</code> class, but it refers to a <code>MapSubscriber</code> object.</p>
  
  <p>I don't know if it is possible to call an "external" function. It might be a silly thing but I can't find any information regarding this.</p>