Angular2 无法显示 json 响应

Question

In a angular 2 template, I am unable to display data from json response:

{
  "success": true,
  "data": {
    "id": 5,
    "user_id": 1,
    "category_id": 1,
    "title": "ghfjhgf",
    "body": "jhgfjhgf",
    "created": "2017-01-19T18:22:02+00:00",
    "modified": "2017-01-19T18:22:02+00:00",
    "file": null,
    "column_9": null,
    "category": {
      "id": 1,
      "name": "Running",
      "body": "Regroupe toutes les traces relative à la course à pied."
    },
    "user": {
      "id": 1,
      "email": "user@local.ch",
      "username": "user",
      "role": "user",
      "active": true,
      "created": "2017-01-15T16:21:44+00:00",
      "modified": "2017-01-15T16:21:44+00:00"
    }
  }
}

When I try with track.success there is no problem, it displays true, but when I try to display the id of data with any of the following:

track.data.id
track['data'].id
track['data']['id']

I have an undefined property. I need help please. Thanks in advance.

This is the output of {{ track |json }}

{
  "success": true,
  "data": {
    "id": 6,
    "user_id": 1,
    "category_id": 1,
    "title": "dsfasd",
    "body": "afdasf",
    "created": "2017-01-19T18:27:26+00:00",
    "modified": "2017-01-19T18:27:26+00:00",
    "file": null,
    "column_9": null,
    "category": {
      "id": 1,
      "name": "Running",
      "body": "Regroupe toutes les traces relative à la course à pied."
    },
    "user": {
      "id": 1,
      "email": "user@local.ch",
      "username": "user",
      "role": "user",
      "active": true,
      "created": "2017-01-15T16:21:44+00:00",
      "modified": "2017-01-15T16:21:44+00:00"
    }
  }

This is my service:

view(id):Observable<any> {
        return this.http.get('http://cake/api/tracks/' + id + '.json')
            .map(response => response.json());
    }

My component:

ngOnInit() {

        this.sub = this.route.params.subscribe((params: Params) => {
            this.id = +params['id'];
        })
        this.trackService.view(this.id).subscribe(track => this.track = track);
    }

Answer 1

You should use Safe Navigation(Elvis) operator when you wanted to display internal property of Object

track['data']?.id
track?.data?.id

Or use json pipe to display all data in json format.

track?.data | json
track | json