Satch3000 Satch3000 - 1 year ago 138
AngularJS Question

Angular2 http display json specific values

I have this code which reads some json data:

import {Component} from 'angular2/core';
import {Http, Response} from 'angular2/http';

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;
.subscribe((res: Response) => { = res.json();
this.loading = false;
}); }


This is the returned json:

"albumId": 1,
"id": 1,
"title": "accusamus beatae ad facilis cum similique qui sunt",
"url": "",
"thumbnailUrl": ""

{{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 Source

Use elvis operator like this


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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download