title: Fetch JSON data using HttpClient in angular 7
body: <p>I want to fetch data from <a href="http://quotes.stormconsultancy.co.uk/quotes.json" rel="nofollow noreferrer">http://quotes.stormconsultancy.co.uk/quotes.json</a> this URL. This URL gives me JSON formatted data.</p>
  
  <p>This is my <strong>data.services.ts</strong> file:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  @Injectable({
    providedIn: 'root'
  })
  export class DataService {
  
    constructor(private http: HttpClient) { }
  
    getQuotes(){
      return this.http.get('http://quotes.stormconsultancy.co.uk/quotes.json');
    }
  }
  </code></pre>
  
  <p>This is my <strong>home.component.ts</strong> file:</p>
  
  <pre><code>import { DataService } from './../data.service';
  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
  })
  export class HomeComponent implements OnInit {
  
    quotes: Object;
  
    constructor( private data: DataService ) { }
  
    ngOnInit() {
      this.data.getQuotes().subscribe(data =&gt;{
        this.quotes = data;
  
        console.log(data);
      });
    }
  
  }
  </code></pre>
  
  <p>I've tried below code in the <strong>home.component.html</strong> file:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div *ngIf="quotes"&gt;
                  &lt;div *ngFor="let quote of quotes.data"&gt;
  
                      &lt;p&gt;{{ quote.author }}  {{ quote.quote}}&lt;/p&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>After using this data is not being shown to the home screen.</p>