Show nested object in a table using *ngFor loop angular 10-CodePudding

I have nested JSON objects. I want to show nested data along with the main item but it's not showing the values.

ts code

  productAttributeItems: any[] = [];

    getProductAttributeItems() {
     this.productAttributeItems = this.productAttributeItems.filter(b => b.ProductId == 5);

     this.productService.getProductAttributesItems(5).subscribe(x => {
      Object.assign(this.productAttributeItems, x);
      console.log(x);
    });
  }

Html

  <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>Attribute Name</th>
                      <th>Name</th>
                      <th>Price</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let attItems of productAttributeItems">
                      <td>{{ attItems.Name }}</td>
                      <td>{{ attItems.ProductAttributeItems?.MasterProductAttributeItem?.Name }}</td>
                      <td style="width: 40%; white-space: nowrap">{{ attItems.ProductAttributeItems.PriceAdjustment }}</td>
                    </tr>
                  </tbody>
</table>

JSON DATA LINK

CodePudding user response：

You need to modify your template.html file as shown below,

<tbody>
  <tr *ngFor="let attItems of productAttributeItems">
    <td>{{ attItems.Name }}</td>
    <ng-container *ngIf="attItems.ProductAttributeItems">
      <ng-container *ngFor="let item of attItems.ProductAttributeItems">
        <tr>
          <td>{{ item.MasterProductAttributeItem.Name }}</td>
          <td>
            {{ item.PriceAdjustment }}
          </td>
        </tr>
      </ng-container>
    </ng-container>
  </tr>
</tbody>

The *ngFor structural directive repeats a given HTML template once for each value in an array, passing the array value as a context for string interpolation or binding.

Based on the JSON data provided, it is evident that ProductAttributeItems is an array of objects, therefore to access the Name property of each MasterProductAttributeItem object property, the ProductAttributeItems array of objects needs to be iterated. The same principle applies for accessing the PriceAdjustment property. Therefore the use of ng-container element in your template. The ng-container also ensures that no new template is introduced in DOM but only the content.

CodePudding user response：

You can use console log to know deep and visualize structure of productAttributeItems

This is I tried to reproduce your JSON object structure.

<table class="table table-hover">
  <thead>
    <tr>
      <th>Attribute Name</th>
      <th>Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let attItems of productAttributeItems.ProductAttributeItems">
      <td>{{ attItems?.MasterProductAttributeItem?.Name }}</td>
      <td>
        {{ productAttributeItems?.Name }}
      </td>
      <td style="width: 40%; white-space: nowrap">
        {{ attItems.PriceAdjustment }}
      </td>
    </tr>
  </tbody>
</table>

Link demo https://stackblitz.com/edit/angular-ivy-zh9spo