Not displaying nested values in Angular app

Question

I have a locally stored JSON file which then has a service which send through the following data set

[  
   {  
      "id":"73c624c9-6db7-4fd2-ac91-c1084aee0565",
      "etl":362,
      "subject":"Temp Subject",
      "body":"Temp Body",
      "deliveryAddress":"[email protected]",
      "accountNumber":"12345",
      "deliveryChannel":"EMAIL",
      "attachments":[  
         {  
            "id":"1",
            "attachToDeliveryMessage":false,
            "fileName":"12345-ITM-2019-01-25.pdf",
            "passwordProtected":true,
            "attachmentType":"ITEMISED_BILLING",
            "renderSucceeded":true,
            "renderError":null,
            "link":{  
               "href":"linky"
            }
         },
         {  
            "id":"2",
            "attachToDeliveryMessage":true,
            "fileName":"12345-INV-27608011279-2019-01-25.pdf",
            "passwordProtected":true,
            "attachmentType":"INVOICE",
            "renderSucceeded":true,
            "renderError":null,
            "link":{  
               "href":"linky"
            }
         }
      ],
      "renderSucceeded":true,
      "renderError":null
   },
]

I can successfully display the outer values but am having difficulty in displaying the nested values like "attachments"

Here is my HTML

<div class="card-body" *ngFor="let item of customerAccountDocs">
  <p>{{item.id}}</p>
  <p>{{item.accountNumber}}
  <p>{{item.etl}}
  <p>{{item.subject}}
  <p>{{item.body}}
  <p>{{item.deliveryAddress}}
  <p>{{item.deliveryChannel}}
  <p *ngFor="let item of customerAccountDocs.attachments">{{item.id}}</p>
</div>

Please assist me. I am just using bootstrap to display the data.

Amit Chigadani · Accepted Answer · 2019-02-11 06:56:28Z

2

You should be iterating over item.attachments instead of customerAccountDocs.attachments

<div class="card-body" *ngFor="let item of customerAccountDocs">
  <p>{{item.id}}</p>
  <p>{{item.accountNumber}}
  <p>{{item.etl}}
  <p>{{item.subject}}
  <p>{{item.body}}
  <p>{{item.deliveryAddress}}
  <p>{{item.deliveryChannel}}
  <p *ngFor="let attachment of item.attachments">{{attachment.id}}</p>
</div>

answered Feb 11, 2019 at 6:56

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

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

Collectives™ on Stack Overflow

Not displaying nested values in Angular app

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