Response.json() bind to single object using interface - RxJs/Observable fails

Question

This scenario works fine when the RESTful API returns a JSON array - but the web method I'm calling returns a single JSON object - and so the code has been converted to map a single object from <IRegistration[]> to <IRegistration> all the way up the stack.

This fails and the Chrome console returns an error showing the app could not find either of the mapped fields in the HTML

The HTML

{{myobject.productId}}
{{myobject.productName}}

The JSON

{
  "productId": 1,
  "productName": "My Field Value"
}

The Interface

export interface IRegistration {
    productId: number;
    productName: string;
}

The observable

getRegistration(): Observable<IRegistration> {
    return this._http.get(this._svcURL)
        .map((response: Response) => <IRegistration>response.json())
        .do(data => console.log('ALL: ' + JSON.stringify(data)))
        .catch(this.handleError);
}

The client component

myobject: IRegistration;

ngOnInit(): void {
    this._registrationService.getRegistration().subscribe(
        reg => this.myobject= reg,
        error => this.errorMessage = <any>error
    );
}

The error

 EXCEPTION: TypeError: Cannot read property 'productId' of undefined in [
{{myobject.productId}}
{{myobject.productName}}

 in SearchComponent@0:0]

The debugging I've done points to the response.json() in the observable failing to map correctly to the IRegistration - I can't seem to find the correct syntax?

Why you think the problem is in map()? What does the .do() print? Also, I think the <IRegistration> in map() is redundant, TypeScript compiler it can't check correct type from json() because it can be anything so it will never raise any error. — martin
hmmm.. <IRegistration[]> works fine when there is an array of JSON - in this Angular2 app the map() works out how to populate the strong type ok - it goes bad when I remove the [] and adjust everything else - the .do() just dumps the JSON to console — Alan Stephens

martin martin · Accepted Answer · 2016-10-19T11:57:20

The code looks fine, I think the problem is that you don't initialize the myobject: IRegistration; before using it.

The doc for lifecycle hook ngOnInit() says:

Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties.

The data is displayed before the HTTP call returns any result so myobject is undefined when Angular is trying to render it.

You can use ? to ignore undefined properties such as {{ myobject?.productId }} or initialize the property first myobject: IRegistration = <IRegistration>{};.

Response.json() bind to single object using interface - RxJs/Observable fails

1 Answers