Angular what is the best way to traverse the nested object

Question

I am trying to traverse over nested object shown below named purchase. It has sub-array called purchaseProducts which contains sub-array called products along with some other data.

What is the best way to traverse over such type of nested object?

I have tried *ngFor like this

<div *ngFor = "let data of purchase "> 
        {{data.date | slice: 0:10}}
        {{data.totalprice}}

    <div *ngFor="let product of purchase.purchaseProducts">

          {{product.id}} // not working
          {{product.quantity}} //not working
          {{product.price}}
          {{product.products.name}}
    </div>
</div>

But the inner div not displaying values.

Thank you in adavnce

Answer 1

There's no purchase_product in your json, I think you should use data.purchaseProducts :

<div *ngFor = "let data of purchase "> 
        {{data.date | slice: 0:10}}
        {{data.totalprice}}

    <div *ngFor="let product of data.purchaseProducts">

          {{product.id}} // not working
          {{product.quantity}} //not working
          {{product.price}}
          {{product.products.name}}
    </div>
</div>

Answer 2

Use <div *ngFor="let product of data.purchaseProducts"> instead of <div *ngFor="let product of purchase.purchase"> . This is because purchaseProduct is a key of data