0

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

1 Answer 1

0

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>

4
  • Hi sir, thanks for replying. I have follow your code however i have face another issue when i run with ionic serve Aug 8, 2021 at 4:49
  • it states "Failed to load resource: the server responded with a status of 404 (Not Found)" Aug 8, 2021 at 4:50
  • I just edited the response, please try adding type ''any like 'data:any' as shown above in the home.page.ts document Aug 8, 2021 at 5:29
  • 1
    Hey kind sir, it finally worked, thanks , it got me riled for quite some time. Have a nice day Aug 8, 2021 at 5:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.