Angular 2: {{object}} works, {{object.child}} throws an error

Question

I have been working with Angular v1 for some time, and since Angular v2 appeared in beta, he has been playing with this.

Now I have this piece of code, but I can’t get it to work, I really don’t know why. Anyway, when I type {{profileUser | json}} {{profileUser | json}} , everything works fine (profileUser is an object).

But when I want to print a child of this object (for example, {{profileUser.name}} or {{profileUser.name.firstName}} ), Angular throws the following error:

EXEPTION: TypeError: undefined is not an object (evaluating 'l_profileUser0.name') in [ {{profileUser.name}} in ProfileComponent@4 :11 .

This is really confusing for me, should just be one of the easiest things. Just started with TypeScript btw ..

Here is the code - ProfileService.ts :

 import { Injectable } from 'angular2/core'; import { Headers } from 'angular2/http'; import { API_PREFIX } from '../constants/constants'; import { AuthHttp } from 'angular2-jwt/angular2-jwt'; import 'rxjs/add/operator/map'; @Injectable() export class ProfileService { API_PREFIX = API_PREFIX; constructor(private _authHttp:AuthHttp) { } getProfileData(username:string):any { return new Promise((resolve, reject) => { this._authHttp.get(API_PREFIX + '/users/username/' + username) .map(res => res.json()) .subscribe( data => { resolve(data.data); }, err => { reject(err); } ) ; }); } } 

And here is my ProfileComponent :

 import {Component, OnInit} from 'angular2/core'; import {RouteParams} from 'angular2/router'; import {ProfileService} from '../../services/profile.service'; @Component({ selector: 'profile', templateUrl: './components/profile/profile.html', directives: [], providers: [ProfileService] }) export class ProfileComponent implements OnInit { public username:string; public profileUser:any; constructor(private _profileService: ProfileService, private _params: RouteParams) { this.username = this._params.get('username'); } ngOnInit() { this.getProfileData(this.username); } getProfileData(username:string):void { this._profileService.getProfileData(username) .then(data => { this.profileUser = data; console.log(data); }) ; } } 

Finally, the profile.html template:

 <pre> <!-- works! --> {{profileUser | json}} </pre> 

or..

 <pre> <!-- throws the error --> {{profileUser.name | json}} </pre> 

or..

 <pre> <!-- throws the error --> {{profileUser.name.firstName}} </pre> 

FYI, profileUser is as follows:

 { "id": "9830ecfa-34ef-4aa4-86d5-cabbb7f007b3", "name": { "firstName": "John", "lastName": "Doe", "fullName": "John Doe" } } 

It would be great if someone could help me, it really holds me back to meet Angular v2. Thanks!

Answer 1

In fact, your profileUser object is profileUser loaded from an HTTP request and may be null at the beginning. The json pipe just does JSON.stringify .

This is what you said about the error: undefined is not an object (evaluating 'l_profileUser0.name') .

You must be sure that your profileUser not null in order to get its name attribute and so on. This can be done using the *ngIf directive:

 <div *ngIf="profileUser"> {{profileUser.name | json}} </div> 

When the data is there, an HTML block will be displayed.

As Eric stated, the Elvis operator can also help you. Instead of {{profileUser.name | json}} {{profileUser.name | json}} you can use {{profileUser?.name | json}} {{profileUser?.name | json}} .

Hope this helps you, Thierry

Answer 2

This is because when your controller is created, profileUser is undefined. And when you use {{profileUser | json}} {{profileUser | json}} , the json filter knows that your data is undefined and does nothing. When profileUser finally defined, angular updates the whole thing, and then profileUser | json profileUser | json working. But when you use {{ profileUser.anything | json}} {{ profileUser.anything | json}} , you get an error because profileUser starts undefined .

You can solve this problem by setting an empty profile to your variable at the beginning of your controller, like this:

 profileUser = { name: {}}; 

So profileUser will never be undefined