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

Question

Been working with Angular v1 for some time now and since Angular v2 came in Beta, been playing around with that.

Now I've got this piece of code, but can't get it to work, really don't know why. Somehow, when I print {{profileUser | json}} everything works fine (profileUser is an object).

But when I want to print a child of that 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.

It's really confusing to me, should be just one of the simplest things around.. Just started with TypeScript btw..

Here is some 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, the profileUser looks like this:

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

Would be great if somebody could help me out, this is really holding me back to get familiar with Angular v2. Thanks!

[Elvis operator](https://angular.io/docs/ts/latest/guide/template-syntax.html) — Eric Martinez, Dec 24 '15 at 16:38
@foxx at the angular.io docs, they are using promises: https://angular.io/docs/ts/latest/tutorial/toh-pt4.html — Aico Klein Ovink, Dec 24 '15 at 17:00
Agreed with @foox, promises aren't necessary here since `http.get` returns an observable object (something similar to promises but more powerful). This [answer](http://stackoverflow.com/questions/34450131/how-to-consume-http-component-efficiently-in-angular-2-beta/34450948#34450948) could help you. — Thierry Templier, Dec 24 '15 at 17:04

score 21 · Accepted Answer · edited May 23 '17 at 11:54

21

In fact your profileUser object is loaded from an HTTP request and it can be null at the beginning. The json pipe simply does a JSON.stringify.

It's what your error message said: undefined is not an object (evaluating 'l_profileUser0.name').

You need to be sure that your profileUser object isn't null to be able to get its name attribute and so on. This can be done using an *ngIf directive:

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

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

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

Hope it helps you, Thierry

edited May 23 '17 at 11:54

Community

1
1

answered Dec 24 '15 at 16:49

Thierry Templier

198,364
44
396
360

Thanks a lot! That just did it. But is this new in v2? Should we do this all the time? – Aico Klein Ovink Dec 24 '15 at 17:01
1

In fact, Angular1, this is done implicitly. You don't have an error and nothing is displayed. The discussion of this [issue](https://github.com/angular/angular/issues/791) could interest you ;-) – Thierry Templier Dec 24 '15 at 17:07

score 3 · Answer 2 · answered Dec 24 '15 at 16:49

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

You can solve it, setting a empty profile to your variable at beginning of your controller, just like that:

profileUser = { name: {}};

This way, profileUser never will be undefined

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

2 Answers2

Linked