javascript - Typescript can't access JSON object (Angular2) - Stack Overflow

admin管理员组

文章数量:1297005

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>

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>

• javascript
• json
• typescript
• angular

Share Follow edited Mar 16, 2016 at 14:09 iberbeu 16.2k66 gold badges3030 silver badges4949 bronze badges asked Mar 16, 2016 at 12:22 user3212350user3212350 40111 gold badge66 silver badges1919 bronze badges 1

• where does this .json() function e from? I know you tried JSON.parse(), but still... – Sam Bauwens Commented Mar 16, 2016 at 12:46

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 10

the user data es in asynchronously which means that it is undefined before. this is when angular will throw an exception because you do undefined.login

what you will have to do is to indicate that userData may be undefined by using the elvis-operator.

try this:

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

alternatively you can use a wrapping *ngIf for example

btw this has nothing to do with typescript, but with angular2 and javascript. please edit your title properly

You try to establish a databinding to _userData.login and NOT to _userData

I see two possible errors:

First: - As Patrick already wrote, you data arrives asynchronously, which means _userData.login is undefined when you try to establish the data-binding, because _userData is undefined (and has no default null value). Therefore the data-binding fails and you won't be informed / get any updates when you later update it - Your second example works, how ever, because _name and _login are not undefined but filled with their NULL value (I guess an empty string). Because of that the data binding is actually successfully estasblished

Second: - Second possible error is a binding of object references and object attributes. - Depending on how the change listener are implemented it is actually a difference between obj1 = newObject and obj1.attr1 = newValue. So changing just the object itself wouldn't trigger the change listener on a single attribute.

How ever, I'd bet it's the first possibility. You could test this by initializing the User object with an empty object in the constructor...

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>

本文标签： javascriptTypescript can39t access JSON object (Angular2)Stack Overflow