Angular2 unable to display json response

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": "[email protected]",
      "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": "[email protected]",
      "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);
    }

do <pre>{{track | json}}</pre> on the ui and paste what it returns — VSO
– VSO, Commented Jan 26, 2017 at 19:31
Probably your track holds refference to the old object but your JSON was populated into a new one. Check the logic. track = myJson; myJson = newJson and your track will be out of sync — v-andrew
– v-andrew, Commented Jan 26, 2017 at 19:35
@VSO Thank's for your answers, I edited my post with the output. — quepasso
– quepasso, Commented Jan 26, 2017 at 19:41
@quepasso Thanks for the update. Are you sure the data is available when you are trying to log it? If you do <pre>{{track.data | json}}</pre> does that return? If it does, then I am guessing your problem is something to do with async. Is your data coming back to an Observable (or a promise)? if so, are you trying to get it from the next callback or then function? Please also post the code snippet where you are trying to use data.id in javascript/typescript. — VSO
– VSO, Commented Jan 26, 2017 at 19:44

Pankaj Parkar · Accepted Answer · 2017-01-26 19:50:56Z

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

answered Jan 26, 2017 at 19:50

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

quepasso Over a year ago

It work fine with track['data']?.id and track?.data?.id. Thank you!!!!!!!!!

VSO Over a year ago

@PankajParkar Can you elaborate please? I thought ? was for when data may not be available? Obviously your answer is right if it worked, but how did you come to it? Upvoting.

Pankaj Parkar Over a year ago

Sure I'd like to explain it, but now I'm on bed, can't type much. So better go through this docs link, let me know if you still don't understand. Would love to add explaination in anser, thanks ;)

VSO Over a year ago

@PankajParkar I understand the docs and just re-read them - I don't see why it solved the problem in this case - the object he is posting DOES have an id value, so how did this help? Anyway, I will ask a question later.

Pankaj Parkar Over a year ago

I got your point what you're saying... May be what OP has done is intially he had track={} so then when he did {{track.success}} it haven't got failed when intial chamge detection run and got true value displayed when object gort fills in.

Collectives™ on Stack Overflow

Angular2 unable to display json response

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related