Angular Ionic - Data not displaying because ctx.data is undefined

Question

I am trying to display data from my SQL database on a server. The data is retrieved correctly and all however it is not displaying in my application. If I console.log it displays perfectly in the console.

Interface ts:

export interface IProduct {
  productID: string;
  productImage: string;
  productName: string;
  productDescription: string;
  productRating: number;
  productPrice: number;
}

page.ts:

export class ViewProductPage implements OnInit {

  product: IProduct;

  constructor(private service: CustomerService) { }

  ngOnInit() {
    this.service.getProduct().subscribe((data: any) => {
      this.product = data;
      console.log(this.product);
    });
  }
}

HTML:

<ion-content color="dark">
  <div class="product-image-container">
    <div class="product-image-wrapper">
      <img [src]="'https://via.placeholder.com/1000'">
    </div>
    <div class="product-name">
      <h1>{{ product.productName }}</h1>
    </div>
  </div>
  <div class="product-description">
    <h6>Price:</h6>
    <p>{{ product.productPrice }}</p>
    <h6>Description:</h6>
    <p>{{ product.productDescription }}</p>
  </div>
</ion-content>

The error that gets shown in the console is:

ERROR TypeError: can't access property "productName", ctx.product is undefined

Get method:

getProduct(): Observable<IProduct> {
  return this.http.get<IProduct>(this.baseURI + 'CustomerOrder/GetProduct/' + this.productID);
}

Yong Shun · Accepted Answer · 2021-08-18 11:06:30Z

2

As you don't initialize product and the delay of the response received, your product will be undefined.

Until the response is received, then only your product will be assigned with a value.

Solution 1: Optional chaining

According to Optional chaining,

The ?. operator is like the . chaining operator, except that instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined. When used with function calls, it returns undefined if the given function does not exist.

<ion-content color="dark">
  <div class="product-image-container">
    <div class="product-image-wrapper">
      <img [src]="'https://via.placeholder.com/1000'">
    </div>
    <div class="product-name">
      <h1>{{ product?.productName }}</h1>
    </div>
  </div>
  <div class="product-description">
    <h6>Price:</h6>
    <p>{{ product?.productPrice }}</p>
    <h6>Description:</h6>
    <p>{{ product?.productDescription }}</p>
  </div>
</ion-content>

Sample Solution 1 on StackBlitz

Solution 2: Check `product` with `*ngIf`

Add *ngIf to check product so that it will not access its inner properties when product is null or undefined.

<ion-content color="dark">
  <ng-container *ngIf="product">
    <div class="product-image-container">
      <div class="product-image-wrapper">
        <img [src]="'https://via.placeholder.com/1000'">
      </div>
      <div class="product-name">
        <h1>{{ product.productName }}</h1>
      </div>
    </div>
    <div class="product-description">
      <h6>Price:</h6>
      <p>{{ product.productPrice }}</p>
      <h6>Description:</h6>
      <p>{{ product.productDescription }}</p>
    </div>
  </ng-container>
</ion-content>

Sample Solution 2 on StackBlitz

Note: Both solutions were added to delay the Observable (by 5 seconds) to reproduce the issue.

answered Aug 18, 2021 at 11:06

Yong Shun

54.6k6 gold badges38 silver badges66 bronze badges

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

3 Comments

Vassilis Over a year ago

Thanks for the answer, the data still does not want to display for some reason, it could be something wrong with the way I am getting my data from my server. I will edit the question to display my get method. Hopefully that might give more insight.

Yong Shun Over a year ago

Hmmm, the GET method looks fine, but can I know how you assign the value to this.productID? Assume that your backend API side works well (mentioned that console.log is able to print out the data). Maybe you can create a Minimal, Reproducible Example on StackBlitz so that I can check the structure of your project. Thanks.

Vassilis Over a year ago

this.productID is assigned on a previous page once i click on a list item. If I display it as a list it displays fine... I am really lost as to why this is happening :(

Collectives™ on Stack Overflow

Angular Ionic - Data not displaying because ctx.data is undefined

1 Answer 1

Solution 1: Optional chaining

Solution 2: Check `product` with `*ngIf`

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution 1: Optional chaining

Solution 2: Check product with *ngIf

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related

Solution 2: Check `product` with `*ngIf`