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