Interpolation of nested objects giving error


#1

hey guys. Can someone help with my problem?
I have a database, and inside it, the object user, as shown below:

"users": [
    {
      "username": "guilmour",
      "password": "guilmour",
      "name": "Guilmour ASC",
      "birthday": "1993-02-25",
      "email": "guilmour.asc@gmail.com",
      "phone": {
        "phoneType": "Mobile",
        "phoneNumber": "035999143176"
      },
      "location": {
        "address": "Pousada Paraíso",
        "city": "Delfinópolis",
        "state": "MG",
        "country": "Brasil"
      },
      "subscribedIn": [
        {
          "categoryId": 0
        }
      ],
      "creationDate": "2015-10-26T07:46:36.611Z",
      "lastUpdateDate": "2016-01-11T11:30:36.611Z",
      "lastLoginDate": "2016-01-11T10:55:36.611Z",
      "id": 0
    }
  ]

on my page’s .ts file, this data is fetched, without problems:

export class UserProfilePage {
  public user = new Array<any>();
  public quest = new Array<any>();

  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    public authService: AuthServiceProvider) {
  }

  ionViewDidLoad() {
    this.user = JSON.parse(localStorage.getItem("userData"));
    console.log(this.user);
  }

}

But, on the HTML, I can’t show the data of nested objects (like phone or location) on the label:

<ion-item class="card-label">
    <ion-label stacked color="primary">**{{user.phone.phoneType}}**</ion-label>
    <ion-label color="background">{{user.username}}</ion-label>
</ion-item>

I want to get the nested data, somehow, and show on the page.
Thanks, in advance