CODEWITHSUNDEEP
ionic-frameworkionic4hybrid-mobile-appangular12
PGC Choudhury
PGC Choudhury

Reputation: 47

Ionic Angular Mobile App showing error while fetching and displaying json-array data from a file within the project ---

This is a Ionic w/ Angular mobile app. related problem, using the Ionic Framework and Angular TS as backend. Am completely new to ionic app development.

I have this stackblitz created to simulate my need ---> https://stackblitz.com/edit/ionic-6h9vwa

Objective is to bind and display category data from cat_data.json file[that will be found in the assets/data/ folder] on the categories tab page. The error I have currently which you can see in the console there -> ERROR Error: this.catData.loadCategories is not a function

This line of code is in the backend .ts file of the category-list.html page. Like so:

ionViewDidEnter()
  {
    return this.catData.loadCategories();
  }

Most of most of the code associated with the problem I have tried to arrange to best of my ability. I can't get to fetch and display the data though, even after trying a multiple no. of perms. and combns. I need to get this working. Show it in some form at least, preferably within a ion-grid and ion-row, ion-col arrangement. Hope you understand. If this is done, I can at least use this in a proper implementation.

I guess you can fork it and work/modify it or edit the original blitz itself. Feel free.

Want this working.

Upvotes: 1

Views: 156

Answers (1)

uKioops
uKioops

Reputation: 354

In the app.module.ts remove the {provide: CategoryData, useClass: HttpClient}

and replace with

providers: [
     { provide: ErrorHandler, useClass: IonicErrorHandler },
     CategoryData
         ]

It removes the error you have.

Don't forget to subscribe to observable and in the subscription you can normally extract data on categories.ts

ionViewDidEnter()
  {
    this.catData.loadCategories().subscribe(p => {
  console.log(p)
});

}

For the moment you get [].

On Stackblitz it's not possible to extract (or not that easy) .json file, but on your IDE it's doable. Check : https://stackoverflow.com/a/55580172/16027883

On your service add :

  getJsonData(filePath: string){
return this.http.get(filePath);
}

and use it in your .ts

ionViewDidEnter(){
this.catData.getJsonData('./assets/cat_data.json').subscribe(resData => {
  this.data = resData;
  console.log(this.data);

     })


}

In the console you can see : {categories: Array(3)} with all the element. You'll need to extract that to show it in your html.

Final update :

in your page .ts

data: any;
dataShow = [];

  ionViewDidEnter(){
this.catData.getJsonData('./assets/cat_data.json').subscribe(resData => {
  this.data = resData;
  this.dataShow = this.data.categories
  

     })


}

in your html :

<ion-content >
<ion-grid>
<ion-row>
  <ion-col size-sm="8" offset-sm="2">
    <ion-card *ngFor="let data of dataShow">
      <ion-card-title>{{data.c_id}}</ion-card-title>
      <ion-card-subtitle>{{data.c_name}}</ion-card-subtitle>
      <ion-card-content>
        {{data.c_description}}
      </ion-card-content>
      
      
    </ion-card>
  </ion-col>
</ion-row>
  </ion-grid>

</ion-content>

Upvotes: 1

Related Questions