Error looping through an array with NgFor

Question

I am trying to create a table to view certificates in an account in angular. Currently getting this error:

ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Here is the object that is getting returned from the api:

{ "value": [ { "properties": { "key": { "keyVault": { "name": "AzureSdkTestKeyVault", "id": "/subscriptions/34adfa4f-cedf-4dc0-ba29-b6d1a69ab345/resourcegroups/testResourceGroup/providers/microsoft.keyvault/vaults/<keyVaultName>", "type": "Microsoft.KeyVault/vaults" }, "keyName": "<keyName>", "keyVersion": "87d9764197604449b9b8eb7bd8710868" }, "publicCertificate": "<publicCertificate>", "createdTime": "2017-03-06T20:33:09.7022471Z", "changedTime": "2017-03-06T20:33:09.7032076Z" }, "id": "/subscriptions/34adfa4f-cedf-4dc0-ba29-b6d1a69ab345/resourceGroups/testResourceGroup/providers/Microsoft.Logic/integrationAccounts/testIntegrationAccount/certificates/<integrationAccountCertificateName>", "name": "<IntegrationAccountCertificateName>", "type": "Microsoft.Logic/integrationAccounts/certificates" } ] }

Here is my model:

export interface Certificate { value?: (ValueEntity)[] | null; } export interface ValueEntity { properties: Properties; id: string; name: string; type: string; } export interface Properties { publicCertificate: string; createdTime: string; changedTime: string; }

Component:

export class CertificateTableComponent { constructor(private _integrationAccountService: integrationAccountService) { } listcertificates:Certificate[] = []; ngOnInit() { this._integrationAccountService.getcertificates() .subscribe ( data => { this.listcertificates = data; } ); } }

and where I am looping through in the table:

<table> <tr> <th>Public Certificate</th> <th>Id</th> <th>Name</th> <th>Type</th> </tr> <tr *ngFor="let cert of listcertificates"> <td>{{cert.properties.publicCertificate}}</td> <td>{{cert.id}}</td> <td>{{cert.name}}</td> <td>{{cert.type}}</td> </tr> </table>

I have played around with the model and tried accessing different values from the response but I am not sure what I am missing. Any help would be appreciated.

Thanks!

EDIT Here is the service:

@Injectable() export class integrationAccountService { constructor(private httpclient: HttpClient, private api: ApiService) { } getcertificates(): Observable<any> { const httpOptions : Object = { headers: new HttpHeaders({ 'Authorization': 'Bearer Token Here' }), responseType: 'json' }; return this.httpclient.get('URL here', httpOptions); } }

my mistake forgot to include that, I have added it to my post — Jonald Monday
– Jonald Monday, Commented May 27, 2021 at 14:00

NeNaD · Accepted Answer · 2021-05-27 14:09:31Z

You should iterate over value property of listcertificates. Also, wrap that in one *ngIf because on the component initialization, listcertificates does not have value property. You can do it like this:

<ng-container *ngIf="listcertificates && listcertificates.value && listcertificates.value.length" <tr *ngFor="let cert of listcertificates.value"> <td>{{cert.properties.publicCertificate}}</td> <td>{{cert.id}}</td> <td>{{cert.name}}</td> <td>{{cert.type}}</td> </tr> </ng-container

in order to get it build in prod mode , you should also change listcertificates:Certificate[] = []; to be listcertificates:Certificate = null;. then update hte view to be ` <tr *ngFor="let cert of listcertificates?.value">` so you dont get an error.
You are right. It will throw an error in initialization of the component. I would solve that by wrapping it in one *ngIf. I will update my answer. Thanks.
Thanks so much for your input! This solved my issue. It is much appreciated

Collectives™ on Stack Overflow

Error looping through an array with NgFor

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related