Not able to access object data inside another object-CodePudding

I am building an E-Commerce App using Angular, MongoDB and NodeJS. I am not able to get the name of the category object, which inturn an object of product.

product-list.component.html:

<ng-template pTemplate="body" let-product>
            <tr>
              <td>{{ product.name }}</td>
              <td><img [src]="product.image" style="width: 100%; height: 100%" alt="" /></td>
              <td>{{ product.price }}</td>
              <td>{{ product.countInStock }}</td>
              <td>{{ product.category.name }}</td>
              <td>{{ product.dateCreated }}</td>

              <td>
                <p-button
                  (click)="deleteProduct(product.id)"
                  styleClass="p-button-danger p-mr-2"
                  icon="pi pi-trash"
                ></p-button>
                <p-button
                  (click)="updateProduct(product.id)"
                  styleClass="p-button-success"
                  icon="pi pi-pencil"
                ></p-button>
              </td>
            </tr>
          </ng-template>

Sample Product object from postman:

{
        "richDescription": "<ul><li><strong>NVIDIA TURING™:&nbsp;</strong>ASUS GeForce RTX™ graphics cards are powered by the Turing™ GPU architecture and the all-new RTX platform. This gives you up to 6X the performance of previous-generation graphics cards and brings the power of real-time ray tracing and AI to games.</li><li><strong>DirectX 12:</strong>&nbsp;Power new visual effects and rendering techniques for more lifelike gaming.</li><li><strong>NVIDIA Shadowplay™</strong>&nbsp;Record and share high-quality gameplay videos, screenshots, and livestreams with your friends.</li><li><strong>Patented Wing-blade Fans</strong>&nbsp;deliver high air pressure, reduced noise levels, IP5X certified dust resistance, and 0dB mode for silent gaming.</li><li><strong>2.7-Slot Design</strong>&nbsp;to expand cooling surface area by more than 50% compared to last gen.</li><li>Reinforced by a&nbsp;<strong>Protective Backplate</strong>&nbsp;that prevents PCB flex and trace damage.</li><li><strong>144-Hour Validation Program</strong>&nbsp;puts cards through a series of stringent tests to ensure reliability.</li><li><strong>Auto-Extreme Technology&nbsp;</strong>uses automation to enhance reliability.</li><li><strong>Super Alloy Power II&nbsp;</strong>includes premium alloy chokes, solid polymer capacitors, and an array of high-current power stages to fuel Turing™’s cores.</li><li><strong>GPU Tweak II</strong>&nbsp;provides intuitive performance tweaking and thermal controls.</li></ul><p><br></p>",
        "image": "http://localhost:3000/public/uploads/51FcVHzQHZL._SS200_.jpg-1657440860700.jpeg",
        "images": [],
        "brand": "ASUS",
        "price": 48373,
        "rating": 0,
        "numReviews": 0,
        "isFeatured": false,
        "_id": "62ca8a5c37e02e3bbc8e8d7e",
        "name": "ASUS GeForce RTX 2060 Overclocked 6G GDDR6 ",
        "description": "Features\r\n\r\nASUS Dual GeForce RTX™ 2060 OC edition EVO 6GB GDDR6 with the all-new NVIDIA Turing™ GPU architecture.\r\n\r\nNVIDIA TURING™ GPU architecture and the all-new RTX platform provides up to 6X the performance of previous-generation graphics cards and brings the power of real-time ray tracing and AI to games.\r\nDirectX 12 enables new visual effects and rendering techniques for more lifelike gaming.\r\nNVIDIA Shadowplay™ Record and share high-quality gameplay videos, screenshots, and livestreams with your friends.\r\nAxial-tech Fan Design brings larger blades and a unique barrier ring to increase air pressure.\r\nAuto-Extreme Technology uses automation to enhance reliability.\r\nSuper Alloy Power II includes premium alloy chokes, solid polymer capacitors, and an array of high-current power stages.\r\nReinforced by a Protective Backplate that prevents PCB flex and trace damage.\r\nGPU Tweak II provides intuitive performance tweaking and thermal controls.\r\n144-Hour Validation Program puts cards through a series of stringent tests to ensure compatibility with the latest games.",
        "category": {
            "_id": "5f15d54cf3a046427a1c26e3",
            "name": "Computer",
            "__v": 0,
            "color": "#E1F0E7",
            "icon": "desktop",
            "id": "5f15d54cf3a046427a1c26e3"
        },
        "countInStock": 55,
        "dateCreated": "2022-07-10T08:14:20.710Z",
        "__v": 0,
        "id": "62ca8a5c37e02e3bbc8e8d7e"
    }

product.ts model:

import { Category } from './category';
export class Product {
  id?: string;
  name?: string;
  description?: string;
  richDescription?: string;
  image?: string;
  images?: string[];
  brand?: string;
  price?: number;
  category?: Category;
  countInStock?: number;
  rating?: number;
  numReviews?: number;
  isFeatured?: boolean;
  dateCreated?: string;
}

category.ts model:

export class Category {
  id?: string;
  name?: string;
  icon?: string;
  color?: string;
}

Error in Browser Console:

core.js:6210 ERROR TypeError: Cannot read properties of null (reading 'name')
    at ProductsListComponent_ng_template_12_Template (products-list.component.html:48:19)
    at executeTemplate (core.js:9614:1)
    at refreshView (core.js:9480:1)
    at refreshEmbeddedViews (core.js:10605:1)
    at refreshView (core.js:9504:1)
    at refreshEmbeddedViews (core.js:10605:1)
    at refreshView (core.js:9504:1)
    at refreshEmbeddedViews (core.js:10605:1)
    at refreshView (core.js:9504:1)
    at refreshComponent (core.js:10651:1)

The product.category.name in the template file shows the above error in the console.

CodePudding user response：

It may be a timing issue with the product initially being null when the component first renders - or maybe there is no category property

You can use the safe navigation operator to test this theory (or possibly fix the issue)

<td>{{ product?.category?.name }}</td>