Correct way to display data from Rest Api in Angular

Question

I have have a service in Angular, which calls data from an API. So when I am trying to display the data it is not displaying?

Service

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

@Injectable()
export class ApiService {

   api: string = 'https://newsapi.org/v2/top-headlines?country=gb&category=entertainment&apiKey=8ee8c21b20d24b37856fc3ab1e22a1e5';

  constructor(
    private http: HttpClient,
  ) { }

getAll(): Observable<any> {
    return this.http.get(this.api)
    .pipe(
      catchError(this.handleError)
    );
  }

  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      console.log(error.error.message)

    } else {
      console.log(error.status)
    }
    return throwError(
      console.log('Something is wrong!'));
  };
}

Component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  public data = [];
  public noData: any;
  public results = [];

  constructor(
  private api: ApiService 
  ){ }

  getAll() {
    this.api.getAll().subscribe((results) =>  {
      this.data = results.results;
      console.log('JSON Response = ', JSON.stringify(results));
    })
  }

 ngOnInit() {

  }
}

JSON response structure

{ 
   "status":"ok",
   "totalResults":70,
   "articles":[ 
      { 
         "source":{ 
            "id":null,
            "name":"Thesun.co.uk"
         },
         "author":"Mary Gallagher",
         "title":"Holly Willoughby breaks down in tears on This Morning as she meets disabled boy who speaks against all odds - The Sun",
         "description":"",

etc etc

HTML

<div *ngFor="let news of data">
   <h3>{{news.json}}</h3>
</div>

Where Am I going wrong?

Show console.log('JSON Response = ', results); output

Adrita Sharma
– Adrita Sharma

2019-11-29 11:32:18 +00:00
Commented Nov 29, 2019 at 11:32 — Adrita Sharma
– Adrita Sharma, Commented Nov 29, 2019 at 11:32
Nothing in console.

Sole
– Sole

2019-11-29 11:32:56 +00:00
Commented Nov 29, 2019 at 11:32 — Sole
– Sole, Commented Nov 29, 2019 at 11:32
JSON data structure added

Sole
– Sole

2019-11-29 11:34:49 +00:00
Commented Nov 29, 2019 at 11:34 — Sole
– Sole, Commented Nov 29, 2019 at 11:34
@Sole I think you want that articles list?

Prashant Pimpale
– Prashant Pimpale

2019-11-29 11:38:21 +00:00
Commented Nov 29, 2019 at 11:38 — Prashant Pimpale
– Prashant Pimpale, Commented Nov 29, 2019 at 11:38

Prashant Pimpale · Accepted Answer · 2019-11-29 11:45:09Z

10

articles is a property of data, so you have to loop data.articles

Try like this:

<ng-container *ngFor = "let news  of data?.articles">
  <h3>{{news.title}}</h3>
</ng-container>

Another option:

TS:

this.data = results.articles;  // here now you have list of all articles

HTML:

*ngFor="let news of data"

Working Demo

edited Nov 29, 2019 at 11:45

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

answered Nov 29, 2019 at 11:30

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sole Over a year ago

Maybe it is something to do with the JSON structure I am trying to get and it is not correct how I am calling?

Adrita Sharma Over a year ago

Check the modified answer

Prashant Pimpale Over a year ago

@AdritaSharma I think it should results.articles?

C.OG Over a year ago

@PrashantPimpale is correct, if you look at the real api response, it should be results.articles @AdritaSharma

Adrita Sharma Over a year ago

Yesss... I see it now. Thanks @PrashantPimpale, c_ogoo

|

MoxxiManagarm · Accepted Answer · 2019-11-29 12:14:57Z

When you ask for a "correct" way, it is commonly recommended to avoid subscriptions in component when you don't have to. Prefer asyncpipe instead.

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  public data$: Observable<Data[]>;

  constructor(
    private api: ApiService 
  ){ }

 ngOnInit() {
    this.data$ = this.api.getAll();
  }
}

<ng-container *ngIf="data$ | async as data; else pending">
  <div *ngFor="let article of data.articels">
     <h3>{{news.json}}</h3>
  </div>
</ng-container>

<ng-template #pending>
  <div>pending</div>
</ng-container>

Advantage: You never forget to unsubscribe, you have easy control over pending state

StepUp · Accepted Answer · 2019-11-29 11:39:03Z

3

It looks like you are assigning object response, not array. So try to assign array:

this.data = results.results.articles;

OR add articles to iterate through array of articles:

<div *ngFor="let news of data?.articles">
   <h3>{{news.json}}</h3>
</div>

answered Nov 29, 2019 at 11:39

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

Comments

Swapnil Patil · Accepted Answer · 2019-11-29 11:38:31Z

2

Please check once

<div *ngFor="let news of data.articles">
   <h3>{{news.author}}</h3>
</div>

answered Nov 29, 2019 at 11:38

Swapnil Patil

1165 bronze badges

Comments

C.OG · Accepted Answer · 2019-11-29 11:42:49Z

0

With this JSON response:

{ 
   "status":"ok",
   "totalResults":70,
   "articles":[ 
      { 
         "source":{ 
            "id":null,
            "name":"Thesun.co.uk"
         },
         "author":"Mary Gallagher",
         "title":"Holly Willoughby breaks down in tears on This Morning as she meets disabled boy who speaks against all odds - The Sun",
         "description":"",

Your component should be:

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  public data = [];
  public noData: any;
  public results = [];

  constructor(
  private api: ApiService 
  ){ }

  getAll() {
    this.api.getAll().subscribe((results) =>  {
      this.data = results.articles;
    })
  }

 ngOnInit() {

  }
}

Your template:

<div *ngFor="let news of data">
   <h3>{{news.json}}</h3>
</div>

answered Nov 29, 2019 at 11:42

C.OG

6,5373 gold badges24 silver badges41 bronze badges

1 Comment

That's Enam Over a year ago

it does not work.

Basil the dev · Accepted Answer · 2025-06-03 01:06:20Z

0

I am using Angular 20, @for is new syntax. With track expression determines a key used to associate array items with the views in the DOM

@for (news of data; track news.json) {
  <h3>{{news.json}}</h3>
} @empty {
  <h3>There are no json.</h3>
}

answered Jun 3 at 1:06

Basil the dev

3085 silver badges18 bronze badges

Collectives™ on Stack Overflow

Correct way to display data from Rest Api in Angular

6 Answers 6

6 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related