I am currently facing an issue while attempting to create a table for viewing certificates in an account using Angular. The error I am encountering is as follows:
ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed
Below is the object 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 the model structure:
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;
}
This is the component code:
export class CertificateTableComponent {
constructor(private _integrationAccountService: integrationAccountService) {
}
listcertificates:Certificate[] = [];
ngOnInit() {
this._integrationAccountService.getcertificates()
.subscribe
(
data =>
{
this.listcertificates = data;
}
);
}
}
The section where I am looping through the data 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 tried different approaches with the model and attempted to access various values from the response, but I seem to be missing something crucial. Any assistance would be highly appreciated.
Thank you!
EDIT Below is the associated 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);
}
}