Angular2: Http Client and reading from JSON containing a single object

Question

I am investigating Angular2 Http Client but I can't find out why I cannot do the below.

I read the following JSON file:

{
  "id": 1,
  "surveyType": "Type1"
}

into:

export class Survey {
    constructor(public id:number, public surveyType:string) {

    }
}

using HTTP Client.

In my service I call HTTP GET:

getSurvey() {
    return this.http
        .get(this.surveyUrl)
        .map((response:Response) => <Survey>response.json());
}

Whereas in my component I have:

survey:Survey;

ngOnInit() {
    this.getSurvey();
}


getSurvey() {
    this.surveyService.getSurvey()
        .subscribe(
            (survey:Survey) => {
                this.survey = survey;
                console.log(this.survey);
            },
            error => console.log(error)
        );
}

My template contains only:

<h1>{{survey.id}}</h1>

When executing the code, I always get errors.

TypeError: Cannot read property 'id' of undefined in [{{survey.id}} in SurveyComponent@0:4]

The context variable in stack trace reads:

context
    SurveyComponent
        survey
            Object id: 1, surveyType: Type1

Also in console I see the object:

Object {id: 1, surveyType: "Type1"}

My concerns:

Why the returned object is not of type Survey?
Why my survey object cannot be displayed using expression?
Finally, how can I get such an example working? The API returns single object, not an array.

I am using Angular2 Beta 11.

Thanks in advance!

See elvis operator

Eric Martinez
– Eric Martinez

2016-03-19 21:26:04 +00:00
Commented Mar 19, 2016 at 21:26 — Eric Martinez
– Eric Martinez, Commented Mar 19, 2016 at 21:26

Thierry Templier · Accepted Answer · 2016-03-19 22:01:15Z

1

Since the value of survey is loaded asynchronously, its value is undefined at the beginning. You need to check it before trying to display its id property using ngIf:

<h1 *ngIf="survey">{{survey.id}}</h1>

or using the Elvis operator as suggestives by Eric in comment:

<h1>{{survey?.id}}</h1>

answered Mar 19, 2016 at 22:01

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kit · Accepted Answer · 2016-03-19 21:33:48Z

1

As Eric mentioned use elvis operator or provide some dummy default for survey by property init.

private survery: Survey = {
    id: null,
    surveyType: ''
}

answered Mar 19, 2016 at 21:33

kit

4,9203 gold badges26 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angular2: Http Client and reading from JSON containing a single object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related