Angular 2 HTTP display JSON specific values

Question

I have this code which reads some json data:

import {Component} from 'angular2/core';
import {Http, Response} from '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;
            }); }

}

This is the 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}} is returning all the data.

I wanted to just get the title for example. So I tried this:

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

What is the right way to display just the title?

Answer 1

Use elvis operator like this

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

The Elvis operator (?) means that the data field is optional and if undefined, the rest of the expression should be ignored.

Answer 2

Add a map and switch to get

   this.data = {}; //initialize to empty object
   this.http.get('http://jsonplaceholder.typicode.com/photos/1')
            .map((res: Response) => res.json())
            .subscribe(res => {
                this.data = res;
                this.loading = false;
            });

Then in the template use it like this {{data.title}}

Here are a few more http samples: http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http

Answer 3

Data is a JSON Object, so if you use data then use the | json pipe. If you want to use a value which is not an Object, then just use the value directly

{{data.title}}

Answer 4

you can try this

 this._http.request('http://jsonplaceholder.typicode.com/photos/1' )
            .map((res:Response) => res.json()) //add this line
            .subscribe(
                data => this.myData = data,
                this.loading = false;
                error =>this.logError(error),
            );

you can now do {{myData.title}}

For more than one object use : ngFor like this

<li *ngFor="let item of myData">
        {{item.title}}
    </li>