Как отобразить таблицу из вложенного массива JSON в угловых?

Question

Я использую Angular 7 и хочу отобразить вложенные данные JSON в таблице. Моя структура Json:

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

Я хочу отобразить значения " purchaseId " и " количество " в таблице с использованием угловых значений.

Answer 1

Если вы хотите отображать только информацию purchaseid и quantity, вы можете использовать директиву *ngFor для циклического перебора массива purchaseOrderProducts и отображения данных.

HTML будет выглядеть следующим образом:

<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>

Вот рабочий пример:

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

Answer 2

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>