Cannot read property 'getKey' of undefined Angular2

Question

I am trying to get an json and put it in an Angular 2 object. Here is my main class app.component.ts:

import {Component, NgModule} from '@angular/core';
import {Http, Response} from '@angular/http';
import 'rxjs/Rx';
import {FeatureService} from "./Features.service";
import {Feature} from "./Feature";
import {Features} from "./Features";
import {Observable} from "rxjs";


@Component({
    selector: 'my-app',
    template: `<h1>Hier staat de json die we uit de test hebben gehaald</h1>
                <p>Deze json hallen we van vert.x af en kunnen we converten naar een mooie rapport.</p>
                <button (click)="clicked()">Haal test Json op</button>
                <button (click)="getFeatures()">features</button>
                <button (click)="getScenarios()">scenarios</button>
                {{leerling}}
                {{features}}
                `,
})
export class AppComponent {
  features: any;
  leerling: any;
  testfeatures : Features;
  leerlingUrl = 'http://localhost:8080/testresultaten';

  public clicked(){
    this.http.get(this.leerlingUrl).map(res => res.json())
      .subscribe(data => this.leerling = JSON.stringify(data)
        ,error => this.leerling = "error", () => console.log("Json got good"));
  }
  public getFeatures(){
    this.featureService.getFeature().subscribe(Features => {this.features = Features});
    this.testfeatures = new Features("test","test");
    //this.features = this.featureService.getFeature();
    this.leerling = this.features.getKey();

  }
  public getScenarios(){
    this.http.get('http://echo.jsontest.com/key/value/one/two').map(res => res.json()).subscribe(data => this.leerling = JSON.stringify(data),error => this.leerling = "error", () => console.log("Json got good"));
  }

  constructor(private http : Http, private featureService : FeatureService){
  }

}

Here is Features class:

export class Features {

  constructor(public one : string, public key : string){}

    public getOne():string{
      return this.one;
    }
    public getKey():string{
    return this.key;
  }
}

And here is the service:

import { Injectable } from "@angular/core";
import {Http, Response} from "@angular/http";
import {Features} from "./features";

@Injectable()
export class FeatureService {
  constructor(protected http: Http) {}


  getFeature()  {
    return this.http.get('http://echo.jsontest.com/key/value/one/two')
      .map((response: Response) => response.json())
      .map(({one,key}) => new Features(one,key));

  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }}

If I create myFeatures myself I just get test but I get the error when I try to get data via HTTP call.

Answer 1

All HTTP calls are asynchronous and you are trying to access data before HTTP call is finished. I'm talking about this line:

this.leerling = this.features.getKey(); // features is not yet populated here

You need to put it inside subscribe:

public getFeatures(){
    this.featureService.getFeature().subscribe(res => {
        this.features = res;
        this.leerling = this.features.getKey();
    });
    this.testfeatures = new Features("test","test");
}

Note that I renamed Features to res because it is Angular's recommended naming convention.