How to display api data in ionic 4?

Ionic Framework
1

Hello, I am getting data using API calls in ionic 4, but I’ve got 3 data at once and it’s three different array so my question is how can i display this data in ionic pages?

I tried like this:

pagedetail.ts

  table: any[];
  information = null;

constructor(private router: Router,
    public shareddataservice: SharedDataService,
    private activatedroute: ActivatedRoute) { }

  ngOnInit() {
    let id = this.activatedroute.snapshot.paramMap.get('id');

    this.shareddataservice.getprodbyID(id).then((dataprod: any[]) => {
      console.log('my data: ', dataprod);
      this.information = dataprod;
    });
  }

pagedetail.html

<h1>Product name:{{information.ProductNameEnglish}}</h1>

here i am getting data in this formate when i am using console.log:

apicall

help please :slight_smile:

2

Hi, @gokujy
You can do something like this,

pagedetail.html

<div *ngFor="let info  of information">
     <div *ngFor="let item of info.Table">
       <h1>Product name:{{item.ProductNameEnglish}}</h1>
    </div>
   <div *ngFor="let item1 of info.Table1">
      <h1>Product name:{{item1.ProductNameEnglish}}</h1>
   </div>
   <div *ngFor="let item2 of info.Table2">
      <h1>Product name:{{item2.ProductNameEnglish}}</h1>
   </div>
</div>

Hope this will solve your problem.

3

thanks for reply, but this is not working!

4

You may be interested in my Ionic 4 and Fetch guide here: https://ionicworkshop.com/posts/ionic-4-fetch/

5

If you use the array number?

<h1>Product name:{{information[0].ProductNameEnglish}}</h1>