CODEWITHSUNDEEP
angulartypescript
Jonald Monday
Jonald Monday

Reputation: 155

Error looping through an array with NgFor

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);
  }
}

Upvotes: 0

Views: 49

Answers (1)

NeNaD
NeNaD

Reputation: 20304

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

Upvotes: 2

Related Questions