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:


  
    
      
    
    
      {{ product.productName }}
    
  
  
    Price:
    {{ product.productPrice }}
    Description:
    {{ product.productDescription }}

The error that gets shown in the console is:

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

Get method:

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

user_8017690 · Answer

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.


  
    
      
    
    
      {{ product?.productName }}
    
  
  
    Price:
    {{ product?.productPrice }}
    Description:
    {{ product?.productDescription }}

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.


  
    
      
        
      
      
        {{ product.productName }}
      
    
    
      Price:
      {{ product.productPrice }}
      Description:
      {{ product.productDescription }}

Sample Solution 2 on StackBlitz

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

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

1 Answers

Solution 1: Optional chaining

Solution 2: Check product with *ngIf

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