title: Angular 4 Display JSON Data from HTTP Get Request
body: <p>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:</p>
  
  <pre><code>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) =&gt; {
        this.data = res.json();
        this.loading = false;
      });
    }
  }
  </code></pre>
  
  <p>The call to <a href="http://jsonplaceholder.typicode.com/posts/1" rel="noreferrer">http://jsonplaceholder.typicode.com/posts/1</a> returns me the following JSON:</p>
  
  <pre><code>{
    "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"
  }
  </code></pre>
  
  <p>I now display this in my html component as:</p>
  
  <pre><code>&lt;h2&gt;Basic Request&lt;/h2&gt;
  &lt;button type="button" (click)="makeRequest()"&gt;Make Request&lt;/button&gt;
  &lt;div *ngIf="loading"&gt;loading...&lt;/div&gt;
  &lt;pre&gt;Data Obtained is: {{ data }}&lt;/pre&gt;
  </code></pre>
  
  <p>But in the browser, I see this:</p>
  
  <p><a href="https://i.stack.imgur.com/Hnz5h.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Hnz5h.png" alt="enter image description here"></a></p>
  
  <p>How do I make my JSON displayed as is?</p>