javascript - Angular2 http display json specific values -

i have code reads json data:

import {component} 'angular2/core'; import {http, response} 'angular2/http';  @component({     selector: 'my-app',     template: `       <h2>basic request</h2>       <button type="button" (click)="makerequest()">make request</button>       <div *ngif="loading">loading...</div>       <pre>{{data | json}}</pre>      `  }) export class appcomponent {      data: object;     loading: boolean;      constructor(public http: http) {     }     makerequest(): void {         this.loading = true;         this.http.request('http://jsonplaceholder.typicode.com/photos/1')             .subscribe((res: response) => {                 this.data = res.json();                 this.loading = false;             }); }  }  returned json:  {   "albumid": 1,   "id": 1,   "title": "accusamus beatae ad facilis cum similique qui sunt",   "url": "http://placehold.it/600/92c952",   "thumbnailurl": "http://placehold.it/150/30ac17" } 

{{data | json}} returning data.

i wanted title example. tried this:

{{data.title | json}} doesn't work.

what right way display title?

use elvis operator this

<pre>{{data?.title}}</pre> 

the elvis operator (?) means data field optional , if undefined, rest of expression should ignored.