title: Angular2 typescript how to get object properties to display in template
body: <p>I am learning angular2 and typescript and wondering why I can not access property values of the object in my template.</p>
  
  <p><strong>My component:</strong></p>
  
  <pre><code>export class Farm{
  
      data:JSON;
      id: any;
  
      constructor(private nextService: NextService, navParams: NavParams){
          this.id = navParams.get("param1");
  
      }
  
      getFarmDetails(){
  
          this.data = this.nextService.fetchData(this.id)
          console.log(this.data)
      }
  }
  </code></pre>
  
  <p>where console.log(this.data) gives me <code>Object {id: 1, name: "Leanne Graham", username: "Bret", email: "Sincere@april.biz", address: Object…}</code></p>
  
  <p>In my template I have </p>
  
  <pre><code>&lt;div&gt;
      {{data}}
  &lt;/div&gt;
  </code></pre>
  
  <p>which outputs on my screen as [object Object] </p>
  
  <p>How can I instead output properties like email or username?</p>
  
  <p>UPDATE: If I do like {{data.email}} I get following error:</p>
  
  <p><a href="https://i.stack.imgur.com/oXGk4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/oXGk4.png" alt="enter image description here"></a></p>