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

Question

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

Hien Nguyen · Accepted Answer · 2021-10-06 01:11:34Z

0

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

answered Oct 6, 2021 at 1:11

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related