angular - Cannot display data of api on cards using ionic-http-plugin

Question

I made a small application where want to display data from news-api on cards using ionic-http-plugin. But I am unable to display data on cards. Can someone tell what i am missing? I am unable to get data on home.page.ts using service

news.service

import { HTTP } from '@ionic-native/http/ngx;

export class NewsService {
  data: any;
  constructor(private http: HTTP) { }

  getData(url){
    return (
      this.http.get(`${API_URL}/${url}&apiKey=${API_KEY}`, {}, {})
        .then(res => {
          this.data = res.data;
          console.log(this.data);
        })
        .catch(error => {
          console.log(error.error); // error message as string
        })
  )}; 

home.page.ts

 export class HomePage {
    
      data: any;
      constructor(private newsService: NewsService) {
      }
    
      ngOnInit(){
       this.data = this.newsService
        .getData('top-headlines?country=in')
          .then(res => {
            console.log(res); //not getting data from news service
          })
      }

home.page.html

 <ion-card *ngFor="let article of data?.articles" (click)="visitLink(article)">
      <ion-img [src]="article.urlToImage"></ion-img>
      <ion-card-header>
         <ion-card-title>{{article.title}}</ion-card-title>
         </ion-card-header>
      <ion-card-content>
         {{article.description}}
         </ion-card-content>
     </ion-card> 

question from:https://stackoverflow.com/questions/66058625/cannot-display-data-of-api-on-cards-using-ionic-http-plugin

Answer 1

Waitting for answers