CODEWITHSUNDEEP
javascriptangulartypescriptionic2ionic3
noor
noor

Reputation: 681

Ionic 2 how to bind JSON to html page components

I have this JSON 

{   

  "_index": "search_posts",   "_type": "posts",   "_id": "12345", 
  "_score": 0,   
  "_source": {
      "alias_id": 0,
      "user_id": 1,
      "name": "demo",
      "email": "[email protected]",
      } 
}

I get the JSON this way in my page.ts : 

this.userDetails = this.navParams.get('params');

when I try to do something like this in the page.html to get the data it throws an error

<p id=userName>{{userDetails._source.name}}</p>

TypeError: Cannot read property '_source' of undefined

Upvotes: 1

Views: 425

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

The problem is that you're trying to access the properties from that object, before it's being initialized (maybe the view is trying to show it, but the component code has not yet initialize it). Try by doing it but this time, using the elvis operator

<p id="userName">{{ userDetails?._source.name }}</p>

That way, if userDetails is null (or undefined), angular won't try to access to its properties.

Upvotes: 2

Related Questions