Fetch JSON data using HttpClient in angular 7

Question

I want to fetch data from http://quotes.stormconsultancy.co.uk/quotes.json this URL. This URL gives me JSON formatted data.

This is my data.services.ts file:

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');
  }
}

This is my home.component.ts file:

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 =>{
      this.quotes = data;

      console.log(data);
    });
  }

}

I've tried below code in the home.component.html file:

<div class="container-fluid">
    <div class="row">
        <div *ngIf="quotes">
                <div *ngFor="let quote of quotes.data">

                    <p>{{ quote.author }}  {{ quote.quote}}</p>
                </div>
        </div>
    </div>
</div>

After using this data is not being shown to the home screen.

Answer 1

Try to modify your data.service.ts file:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Rx';

@Injectable({
  providedIn: 'root'
})

export class DataService {
    constructor(private http: HttpClient) { }
    public getQuotes(): Observable<any> {
        return this.http.get("http://quotes.stormconsultancy.co.uk/quotes.json")
          .map((res:any) => res);
    }
}

Answer 2

I have seen response of given API. It looks like below:

[{
    "author": "Bill Sempf",
    "id": 44,
    "quote": "QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers. Orders a sfdeljknesv.",
    "permalink": "http://quotes.stormconsultancy.co.uk/quotes/44"
}, {
    "author": "Phil Karlton",
    "id": 43,
    "quote": "There are only two hard things in Computer Science: cache invalidation, naming things and off-by-one errors.",
    "permalink": "http://quotes.stormconsultancy.co.uk/quotes/43"
}, 

You just need to remove .data from your html.

home.component.html file:

<div class="container-fluid">
    <div class="row">
        <div *ngIf="quotes">
                <div *ngFor="let quote of quotes">

                    <p>{{ quote.author }}  {{ quote.quote}}</p>
                </div>
        </div>
    </div>
</div>

If not succeed, inspect this.quotes like Najam us saqib mentioned in comment. If it is not array make it by using map function.