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

Question

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.

uKioops · Accepted Answer · 2021-06-17 13:29:57Z

1

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>

edited Jun 17, 2021 at 13:29

answered Jun 10, 2021 at 13:04

uKioops

3543 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

PGC Choudhury Over a year ago

no, I don't use a external URL. The file is within my project structure only. A json file called cat_data.json .... and the data is in there only, as you can see in my stackblitz. @uKioops yes, as it is turning out atmo, the thing is not easy Can you tell me what do I do in such a case ..... cuz data is not coming from an external URL; it's a headache.... any alternate idea or arrangement that would make this easier.... thanks for the expansion on the code block for data coming external URL case-scenario,

uKioops Over a year ago

I edited my answer with some new things to try

uKioops Over a year ago

ok it's working here. With the last update

PGC Choudhury Over a year ago

hi @uKioops, let me have read the whole thing and go through it well, I'll revert back,

PGC Choudhury Over a year ago

hi @uKioops, just asking, did you create a new separate stackblitz or edited on mine only,

|

Collectives™ on Stack Overflow

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

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related