How to display the table from nested json array in angular?

Question

I'm using angular 7 and I want to display the nested json datas in the table. My Json structure:

{
  "id": "1",
  "referenceNumber": "P123",
  "supplierNote": "My Notes",
  "internalNote": "Your notes",
  "purchaseOrderProducts": [
   {
      "purchaseId": "p1",
      "quantity": 1000,
   },
   {
      "purchaseId": "p2",
      "quantity": 500,
   }
 ]
}

I want to display the value " purchaseId " and " quantity " in the table using angular.

Answer 1

Use *ngFor in the html for the above
assuming the above json is an Object purchase

<table>
<div *ngFor="let obj of purchase.purchaseOrderProducts">
<tr>{{obj.purchaseId}}</tr>
<tr>{{obj.quantity}}</tr>
</div>
</table>

Answer 2

If you want to display only purchaseid and quantity information then you can use *ngFor directive to loop over the purchaseOrderProducts array and display the data.

HTML will look like below :

<table bordar="2">
    <tr>
        <th>purchaseId</th>
        <th>quantity</th>
    </tr>
    <tr *ngFor="let data of arrObj?.purchaseOrderProducts">
        <td>    {{data.purchaseId}}</td>
        <td>{{data.quantity}}</td>
    </tr>
</table>

Here is the working example :

https://stackblitz.com/edit/angular-dfsfpr