Need help for Assignment! API usage for the first time on Ionic

Issue

So i’m using https://github.com/surhud004/Foodish to reference as the api, all i wanted to do is get the random image to appear on screen.

So i’m actually not sure how or why to do it, and need someone to correct me where i’m wrong or teach me my mistakes, as i’m relatively new on implementing api

i have created a food.service , so in my food.service.ts , my code will be

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

@Injectable({
  providedIn: 'root'
})
export class FoodService {

  constructor(private http: HttpClient) { }


    getAll() { // Calls when app loads - to display all countries
      return this.http.get("https://foodish-api.herokuapp.com/api");
      }
}

And my app.module.ts , i have imported

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { HttpClientModule, HttpClient } from '@angular/common/http';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
  providers: [
    HttpClient,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

So i’m trying to implement first without creating the button on home page so my home.page.ts

export class HomePage {

  ngOnInit(){
    this.loadData();
} 


  results: any  [];
  constructor(private http: HttpClient, private foodService : FoodService, private activatedRoute: ActivatedRoute) 
  {
    this.foodService.getAll().subscribe((data) > {this.results  data});
    console.log(this.results)
  }

  loadData() {    
    this.http.get("https://foodish-api.herokuapp.com/api").subscribe(
     data>{
       console.log(data);
       this.results  data;

     }, err>{
       console.log(err);
     }
   );
 }
}

and my home.page.html

<ion-header [translucent]"true">
  <ion-toolbar>
  <ion-title>
     Food
  </ion-title>
  </ion-toolbar>
 </ion-header>
 <ion-content [fullscreen]"true">
  <ion-item button *ngFor"let result of results.images" >

    <p>{{ result.image }}</p>
  </ion-item>
 </ion-content>

However im not sure why i cant retrieve the image to show, for example , click the image to see

Solution

foodservice should be:

//IN THE FOOD SERVICE

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

@Injectable({
  providedIn: 'root'
})
export class FoodService {

  constructor(private http: HttpClient) { }


    getRandomImage() { // this link just return 1 object with 1 image
      return this.http.get("https://foodish-api.herokuapp.com/api");
      }
}

Then in home.page.ts

export class HomePage {
  randomImage: string  ''; // since you are just using 1 image you can use an string instead of an array
  constructor(private http: HttpClient, private foodService : FoodService, private activatedRoute: ActivatedRoute) 
  {
    //add data type "any" to eliminate the error: "Property 'image' does not exist on type Object
    this.foodService.getAll().subscribe((data:any) > {
      console.log(data)
      // the data arrives with the image link in a property called image so you should do this
      this.randomImage  data.image
     });
  }
}

Finally in the home.page.html

<ion-header [translucent]"true">
  <ion-toolbar>
  <ion-title>
     Food
  </ion-title>
  </ion-toolbar>
 </ion-header>
 <ion-content [fullscreen]"true">
  <ion-item >
    // display the image from the component property randomImage
    <img [src]"randomImage">
  </ion-item>
 </ion-content>

Answered By – David Ricardo Amaya Rojas