Typescript can't access JSON object (Angular2)

Viewed 3819

I have the weirdest problem.

I'm receiving a JSON object

{"login":"admin","name":"Admin"}

And what I'm doing in code is:

private _userData: User;
...
private getUserData() {
    this._userInfoService.getUserInfo()
        .subscribe(
            data => {
                this._userData = data.json(); // (using <User> data.json() changes nothing
            },
            err => alert(err)
        );
}

Where User type is

export interface User {
    login: string;
    name: string;
}

But when I'm trying to access those fields in html with angular:

<p>{{ _userData.login }}</p>
<p>{{ _userData.name }}</p>

I'm getting some nasty errors in console like: Error: EXCEPTION: TypeError: l__userData21 is null in [{{ _userData.login }} in UserHomeComponent@8:7]

although I can clearly see when I'm doing console.log on this object: Object { login: "admin", name: "Admin" }

I did it exactly the same with other class and it works there. What is even more interesting is that when I slightly change the code, like this:

private _name: string;
private _login: string;
...
private getUserData() {
    this._userInfoService.getUserInfo()
        .subscribe(
            data => {
                this._name = (<User> data.json()).name;
                this._login = (<User> data.json()).login;
            },
            err => alert(err)
        );
}

and view:

<p>{{ _login }}</p>
<p>{{ _name }}</p>

Then everything works perfectly! I have absolutely no clue what is happening (tried to cast data.json() to but that changes nothing.)

@Edit: The other class, where it works is:

export interface LoginData {
    access_token: string;
    token_type: string;
    refresh_token: string;
    expires_in: number;
    scope: string;
}


private _loginData = <LoginData> JSON.parse(sessionStorage.getItem("loginData")); //tried this also with User, doesn't work

and in the view:

<p>access_token: {{ _loginData.access_token }}</p>
<p>token_type: {{ _loginData.token_type }}</p>
<p>refresh_token: {{ _loginData.refresh_token }}</p>
<p>expires_in: {{ _loginData.expires_in }}</p>
4 Answers

Try adding something like this in front of the <p> tags:

<div *ngFor="let uData of _userDat;">

and then

<p>{{uData.login}} 
</p></div>

OR

<div *ngIf="user">
<p>{{_userDat.login}}</p>

Use ? for safe navigation.

<p>{{ _userData?.login }}</p>
Related