title: Angular2 HTTP using observables subscribe showing data undefined
body: <p>I don't know what I'm doing wrong but somehow i'm not able to read data, though the data is coming from server in response and even the data is getting showed inside service extractData method when I'm putting the console but in component inside subscribe function it is giving me undefined. Help me what I'm doing wrong, what I'm assuming is that this is the problem of async but, I have no idea how correct it.
  Any help will be appreciable. 
  Thanx in advance</p>
  
  <p><strong>Component.ts</strong></p>
  
  <pre><code>import { Component, Input, OnInit } from '@angular/core';
  import {AdminService} from './admin.service';
  import {logistics} from '../shared/model/logistics';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/operator/catch';
  import 'rxjs/add/operator/debounceTime';
  import 'rxjs/add/operator/distinctUntilChanged';
  import 'rxjs/add/operator/switchMap';
  import 'rxjs/add/operator/toPromise';
  import { Observable }     from 'rxjs/Observable';
  import {Response } from '@angular/http';
  @Component({
      moduleId:module.id,
      selector: 'admin',
      templateUrl: 'admin.component.html',
      styleUrls:['admin.component.css'],
      providers:[AdminService]
  })
  
  export class AdminComponent implements OnInit{
     @Input() public allocatedAssetsList: logistics[];
  
  
      mode = 'Observable';
      public errorMsg = '';
      constructor(private adminService: AdminService) {
  
      }
  
      ngOnInit(){
          this.listByEmpId("123");
  
      }
  
      listByEmpId(empId:string){
  
          this.adminService.getAllocatedAssets(empId).subscribe(
          res =&gt; this.allocatedAssetsList = res,
          error =&gt;  this.errorMessage = &lt;any&gt;error);
      }
  }
  </code></pre>
  
  <p><strong>Service.ts</strong></p>
  
  <pre><code>import { Injectable }     from '@angular/core';
  import { Http, Response } from '@angular/http';
  import { Hero }           from './hero';
  import { Observable }     from 'rxjs/Observable';
  import { Headers, RequestOptions } from '@angular/http';
  import {logistics} from '../shared/model/logistics';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/operator/catch';
  import 'rxjs/add/operator/debounceTime';
  import 'rxjs/add/operator/distinctUntilChanged';
  import 'rxjs/add/operator/switchMap';
  import 'rxjs/add/operator/toPromise';
  
  
  @Injectable()
  export class AdminService {
      constructor (private http: Http) {}
      private listAssetsURL = '/api/logistics/list/';  // URL to web API
  
      private extractData(res: Response) {
          let body = res.json();
          return body || { };
      }
  
      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);
      }
  
      getAllocatedAssets (empId: string): Observable&lt;logistics[]&gt; {
  
          this.listAssetsURL+= empId;
          //let body = JSON.stringify({ empId });
          let headers = new Headers({ 'Content-Type': 'application/json' });
          let options = new RequestOptions({ headers: headers });
  
          return this.http.get(this.listAssetsURL)
              .map(this.extractData)
              .catch(this.handleError);
      }
  }
  </code></pre>