title: How to make an API call in Angular 2?
body: <p>There are lots of resources out there already but I haven't been able to find one that works for one reason or another. Take a generic example: I want to get the response from <a href="http://swapi.co/api/people" rel="nofollow">http://swapi.co/api/people</a>, which will be a list of people from Star Wars. </p>
  
  <pre><code>import {Injectable } from '@angular/core';
  import {Http, Response} from '@angular/http';
  import {Observable} from 'rxjs/Observable';
  
  import 'rxjs/add/operator/map';
  
  @Injectable()
  export class OombaDataService {
      constructor(private http: Http) {}
      private usersUrl = 'http://swapi.co/api/people/';
  
      getData() {
          return this.http.get(this.usersUrl)
          .map(this.extractData)
      }
  
      private extractData(res: Response) {
          let body = res.json();
          return body.data || { };
      }
      private handleError (error: any) {
        // In a real world app, we might use a remote logging infrastructure
        // We'd also dig deeper into the error to get a better message
        let errMsg = (error.message) ? error.message :
                     error.status ? `${error.status} - ${error.statusText}` : 'Server error';
        console.error(errMsg); // log to console instead
        return Observable.throw(errMsg);
      }
  }
  </code></pre>
  
  <p>A lot of this should be correct since it's based on Angular's own <a href="https://angular.io/docs/ts/latest/guide/server-communication.html" rel="nofollow">tutorial</a> on the matter. But for whatever reason, when I call it in my components, it just returns an observable object without the JSON data. What am I missing?</p>