title: Angular2 Http Undefined error
body: <p>I am trying to make a get request using the Http module in Angular2 (angular 2.0.0-beta.0 and typescript 1.7.5), but I have some kind of synchronise problem. I put everything in one .ts file to make it easier to communicate.</p>
  
  <p>Everything compiles fine in typescript but Chrome shows the following error the in console :</p>
  
  <pre><code>EXCEPTION: TypeError: Cannot read property '_id' of undefined in [Id: {{contact._id}} Name: {{contact.name}} in Test@1:13]
  ORIGINAL EXCEPTION: TypeError: Cannot read property '_id' of undefined
  ORIGINAL STACKTRACE:
  TypeError: Cannot read property '_id' of undefined
  ...
  ...
  Object {_id: "5695e53d98ff94671ae22d55", name: "Piet Pannenkoek", email: "piet@gmail.com", number: "435345"}
  </code></pre>
  
  <p>test1.ts:</p>
  
  <pre><code>import {bootstrap} from 'angular2/platform/browser';
  import {Component} from 'angular2/core';
  import {Http, Response, HTTP_PROVIDERS} from 'angular2/http';
  import 'rxjs/Rx';
  
  @Component({
      selector: 'my-app',
      template: `
          &lt;div&gt;Id: {{contact._id}} Name: {{contact.name}}&lt;/div&gt;
      `,
      providers: [HTTP_PROVIDERS]
  })
  
  export class Test {
  
      public contact: Contact;
  
      constructor(private http: Http) {}
  
      ngAfterViewInit() {
          this.http.get('/api/contactlist/5695e53d98ff94671ae22d55')
              .map((res: Response) =&gt; res.json())
              .subscribe(res =&gt; {
                  console.log(res);
                  this.contact = res;
              });
      }
  }
  
  export class Contact {
      constructor (public _id: string, public name: string, public email: string, public number: string) {};
  }
  
  bootstrap(Test);
  </code></pre>
  
  <p><a href="http://localhost:3000/api/contactlist/5695e53d98ff94671ae22d55" rel="nofollow">http://localhost:3000/api/contactlist/5695e53d98ff94671ae22d55</a></p>
  
  <pre><code>{"_id":"5695e53d98ff94671ae22d55","name":"Piet Pannenkoek","email":"piet@gmail.com","number":"435345"}
  </code></pre>
  
  <p>Strange is that another (little different) version test2.ts doesn't give any errors:  </p>
  
  <pre><code>import {bootstrap} from 'angular2/platform/browser';
  import {Component} from 'angular2/core';
  import {Http, Response, HTTP_PROVIDERS} from 'angular2/http';
  import 'rxjs/Rx';
  
  @Component({
      selector: 'my-app',
      template: '&lt;div *ngFor="#contact of contacts"&gt;Id: {{contact._id}} Name: {{contact.name}}&lt;/div&gt;',
      providers: [HTTP_PROVIDERS]
  })
  
  export class Test {
  
      public contacts: Contact[] = [];
  
      constructor(private http: Http) {}
  
      ngAfterViewInit() {
          this.http.get('/api/contactlist')
              .map((res: Response) =&gt; res.json())
              .subscribe(res =&gt; {
                  console.log(res);
                  this.contacts = res;
              });
      }
  }
  
  export class Contact {
      constructor (public _id: string, public name: string, public email: string, public number: string) {};
  }
  
  bootstrap(Test);
  </code></pre>
  
  <p><a href="http://localhost:3000/api/contactlist" rel="nofollow">http://localhost:3000/api/contactlist</a></p>
  
  <pre><code>[{"_id":"5695e53d98ff94671ae22d55","name":"Piet Pannenkoek","email":"piet@gmail.com","number":"435345"},{"_id":"56a63059b2cb5f4b10efaf9a","name":"Jan Janssen","email":"jan@email.com","number":"642"},{"_id":"56a6307bb2cb5f4b10efaf9b","name":"Gerard de Boer","email":"gerard@email.com","number":"1234"},{"_id":"56abe853211b52a441f6c45f","name":"Bjorn Borg","email":"bjorn@borg.com","number":"123"},{"_id":"56abe8da211b52a441f6c460","name":"Hans Dobbelsteen","email":"hans@email.com","number":"752"},{"_id":"56abe8fe211b52a441f6c461","name":"Marco van Basten","email":"marco@email.com","number":"961"}]
  </code></pre>