title: JSON data loaded from http.get() is undefined in my Angular 2 template
body: <p>I'm trying to read a local json file and parse it into a class that i made which have the same properties. When i try to read from the class, it gives me errors saying the class is null or undefined.</p>
  
  <p>I have a file <code>hall.ts</code> which looks like this:</p>
  
  <pre><code>import {Item} from '../item/item';
  export class Hall {
      constructor(public id:number,
                  public naam:string,
                  public oppervlakte:number,
                  public aantalItems:number,
                  public itemsMetNodigeActie:number,
                  public items:Item[]) {
      }
  }
  </code></pre>
  
  <p>It uses <code>item.ts</code>:</p>
  
  <pre><code>export class Item {
      constructor(public categorie:string,
                  public naam:string,
                  public productnummer:string,
                  public omschrijving:string,
                  public laatsteUitgevoerdeActie:Actie,
                  public eerstVolgendeActie:Actie) {
      }
  }
  export class Actie{
      constructor(datum: string,
                  type: string,
                  omschrijving: string){}
  }
  </code></pre>
  
  <p>The json file, <code>hall1.json</code>, that i'm trying to read from looks like this:</p>
  
  <pre><code>{
    "id": 1,
    "naam": "hall1",
    "oppervlakte": 100,
    "aantalItems": 3,
    "itemsMetNodigeActie": 3,
    "items": [
      {
        "id": 1,
        "categorie": "machine",
        "productnummer": "ADE124e",
        "omschrijving": "print papieren af",
        "laatsteUitgevoerdeActie": {
          "datum": "2015-01-05T00:00:00.000Z",
          "type": "vervanging",
          "omschrijving": "papier vervangen"
        },
        "eerstVolgendeActie": {
          "datum": "2016-01-06T00:00:00.000Z",
          "type": "vervanging",
          "omschrijving": "inkt vervangen"
        }
      }
    ]
  }
  </code></pre>
  
  <p>I'm using a <code>hall.service.ts</code> which tries to read the json file which is locally stored, and returns it in an <code>Hall</code> object. This is the methode for doing that:</p>
  
  <pre><code>public getHall(): Observable&lt;Hall&gt; {
      return this.http.get('app/hall/hall1.json')
          .map((res:Response) =&gt; res.json());
  }
  </code></pre>
  
  <p>I use this method in my <code>hallDetail.component.ts</code></p>
  
  <pre><code>export class HallDetailComponent implements OnInit{
      public hall: Hall;
      constructor(
          private service: HallService
      ){}
      ngOnInit(){
          this.service.getHall().subscribe((hall:Hall) =&gt; {
              this.hall = hall;
          })
      }
  }
  </code></pre>
  
  <p>So far it doesn't give me any errors, but when i try to read from the <code>hall</code> object, it sais that it is undefined</p>
  
  <pre><code>@Component({
      template: `
    &lt;div&gt;
      {{hall.naam}}
    &lt;/div&gt;
    `
  })
  </code></pre>
  
  <p>Error :</p>
  
  <pre><code>EXCEPTION: TypeError: Cannot read property 'naam' of undefined in [
      {{hall.naam}}
     in HallDetailComponent@1:7]
  </code></pre>