Angular 2 Typescript Object is undefined after attempting to map json data to it

Question

I have this json data that is being returned from the server that won't map to my typescript object. I am sure it's a small issue but I can't find it, nor can my teammate.

JSON: {"labels: ["foo","bar"], "sums":null, "sid":0, "cid":0}

My typescript object:

import {Claim} from './Claim';
import {ResponseInfo} from './ResponseInfo';
import {Rule} from './Rule';
import {ServiceLine} from './ServiceLine';

export interface ClaimResponse {
    labels: string[];
}

This is my service:

import {Injectable} from '@angular/core';
import {Observable}    from 'rxjs/Observable';
import {RequestOptions, Http, Response, Headers, URLSearchParams} from '@angular/http';
import {ClaimResponse} from './ClaimResponse';

@Injectable()
export class EvaluationDetailService {
    constructor(private http: Http) { }

    getEvaluationDetail(): Observable<ClaimResponse> {
        return this.http.get('./EvaluationDetail/GetEvaluationDetail')
            .map((res: Response) => <ClaimResponse>res.json())
            .do(data => console.log(JSON.stringify(data)))
            .catch(this.handleError);
    }    

    private handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
}

Here is my component:

@Component({
    selector: 'claim-evaluationdetail',
    templateUrl: './Scripts/EvaluationDetail/evaluationdetail.component.html',
    providers: [EvaluationDetailService, HTTP_PROVIDERS],
    directives: [ResponseInfoComponent, ServiceLineComponent, OverlayPanel]
})

export class EvaluationDetailComponent implements OnInit {
    constructor(private _evaluationDetailService: EvaluationDetailService) { }

    claimResponse: ClaimResponse    ;   
    visible: boolean = false;
    showRules: boolean = false;

    ngOnInit() {
        this.getClaimResponse();
    }

    getClaimResponse() {
        this._evaluationDetailService.getEvaluationDetail().subscribe(claimResponse => this.claimResponse = claimResponse);
    }
}

The data gets returned perfectly fine from the server (see the JSON data above), but if I try to access anything involving "this.claimResponse", it is undefined.

What am I doing wrong?

Are you attempting to access it before the service call has resolved? — David L, May 27 '16 at 20:04
I would offer the same advice I offered [here](http://stackoverflow.com/questions/37357365/rxjs-subscribers-passing-null-values/37358112#37358112) — drew moore, May 27 '16 at 20:25
What do you mean with "The data gets returned perfectly fine"? Is it that you get the expected result printed with `.do(data => console.log(JSON.stringify(data)))`? — Picci, May 27 '16 at 20:36
So to clarify, you call the service fine, in your console you're seeing the object as you expect it but it isn't binding to your component correct? Have you tried moving your console to your subscription and maybe changing names a bit for clarity while debugging? ex: ...subscribe((newResponse) => {console.log('dont stringify me as console will figure it out, new response:', newResponse); this.claimResponse = newResponse;}); If you see it being ok in that console I'd then see if the "this" scope is being lost inside the subscription and use that = this before and use "that" in the sub.. — Dennis Smolek, May 28 '16 at 04:53
@Picci Yes that is what I mean. My .do function prints the data I need but it never gets set to my object for use. {"labels":["Medical Records Needed","Review For Payment"]} — Bohms27, May 31 '16 at 11:28

score 0 · Answer 1 · edited May 28 '16 at 07:20

0

I think you have the same problem I had minutes ago.

In your componentes.html put

*ngIf="claimResponse"

before trying to access any of its properties.

I hope it helps

edited May 28 '16 at 07:20

Pardeep Jain

84,110
37
165
215

answered May 28 '16 at 07:16

Andrés Guibarra

43
1
3

This makes it so the page doesnt fail, because claimResponse is undefined therefore wont run that block, but the thing is, it shouldn't be undefined. The data I am returning should bind to the object but isnt. – Bohms27 May 31 '16 at 11:17

score 0 · Answer 2 · answered May 28 '16 at 07:20

0

Either as @AndrésGuibarra wrote wrap your template with

<div *ngIf="claimResponse">

so it doesn't get rendered until data is available or use the safe-navigation (Elvis) operator to avoid errors when claimResponse is null and Angular tries to access properties:

claimResponse?.someProp

answered May 28 '16 at 07:20

Günter Zöchbauer

623,577
216
2,003
1,567

Same response I have to below. Since claimResponse is showing as undefined, it prints nothing. The issue is that claimResponse should not be undefined. My service .do function shows me the data: {"labels":["Medical Records Needed","Review For Payment"]}, but it doesnt seem to be getting set to my object. – Bohms27 May 31 '16 at 11:26

Angular 2 Typescript Object is undefined after attempting to map json data to it

2 Answers2