Problem trying to get values from my API Ionic 4

Question

I'm trying to get the values from my API but I can't show them in ion-list.

Screenshot of the error:

As you can see in the image I got the data from my API but I can show them in ion-list.

The HTML is this

<ion-list>
<ion-item *ngFor="let item of (results | async)">

  <ion-label text-wrap>{{item.nombreProducto}}</ion-label>
  <ion-button color="light"><img src="../../assets/icon/binoculars.png" alt="" (click)="presentarModal()" item-end></ion-button>
  <ion-button color="light"><img src="../../assets/icon/cart.png" alt="" (click)="addCart()" item-end></ion-button>
</ion-item>

I've created a service that has a method called getAll

   getAll(): Observable<any>{
    return this.http.get(`${this.url}`).pipe(
      map(results=>{
        console.log('Data', results);
        return results['Data'];
      })
    );
  }

And in my home.page.ts the getAll method contains this

getAll(){
  this.results = this.productService.getAll();
}

Answer 1

You're trying to access a key in the array which does not exist. Your results is the data you are looking for that you want to return. Update your method to the following:

getAll(): Observable<any>{
return this.http.get(`${this.url}`).pipe(
  map(results=>{
    console.log('Data', results);
    return results;
  })
);