Angular 4 Display JSON Data from HTTP Get Request

Question

I have a simple Angular 4 application which is contacting a HTTP REST server and this server is simply returning a JSON payload and I would like to display this JSON payload as is in the browser. This is my makeRequest typescript function:

import { Component, OnInit } from '@angular/core';
import {Http, Response} from '@angular/http';

@Component({
  selector: 'app-simple-http',
  templateUrl: './simple-http.component.html'
})
export class SimpleHttpComponent implements OnInit {
  data: string;
  loading: boolean;

  constructor(private http: Http) {
  }

  ngOnInit() {
  }

  makeRequest(): void {
    this.loading = true;
    this.http.request('http://jsonplaceholder.typicode.com/posts/1')
    .subscribe((res: Response) => {
      this.data = res.json();
      this.loading = false;
    });
  }
}

The call to http://jsonplaceholder.typicode.com/posts/1 returns me the following JSON:

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

I now display this in my html component as:

<h2>Basic Request</h2>
<button type="button" (click)="makeRequest()">Make Request</button>
<div *ngIf="loading">loading...</div>
<pre>Data Obtained is: {{ data }}</pre>

But in the browser, I see this:

How do I make my JSON displayed as is?

Answer 1

You can use the json pipe. In your template:

<pre>Data Obtained is: {{ data | json }}</pre>

Also you have to change the type of your data property to any instead of string.

Answer 2

You have two options:

• Use the built-in pipe JsonPipe (this.data should be of type any):

  <pre>Data Obtained is: {{ data | json }}</pre>

• Get the JSON string manually:

  this.data = JSON.stringify(res.json()); //data is a string :)

  or

  <pre>Data Obtained is: {{ JSON.stringify(data) }}</pre>

You have to understand that any value in a template is shown via calling its .toString() method, so a basic object (something like {key: value}) just shows [object Object]

Here you have a working demo, check the app.ts file, the ajax call and the template with the json pipe is there.