I have implemented a method to fetch data from an API using Angular:
ngAfterViewInit() {
this.exampleDatabase = new ExampleHttpDatabase(this._httpClient);
var href = '/schuhe-store/status';
if (environment.production === false) {
href = 'https://sales.dailysshop.com/schuhe-store/status';
}
for (var val of this.dataArray) {
const requestUrl = `${href}?type=${val}`;
this._httpClient
.get<StatusInterface>(requestUrl)
.pipe(
map((data) => {
return data;
})
)
.subscribe(
(data) => {
this.dataResults[val] = data;
console.log(this.dataResults[val]);
},
(error) => {
const dialogConfig = new MatDialogConfig();
if (error.status == 404) {
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
console.log(error.errno);
this.dialog.open(DialogOverviewExampleDialog, dialogConfig);
} else if ((error.status = 200)) {
this.dialog.open(DialogOverviewExampleDialog, dialogConfig);
}
this.routeNotRegistered = true;
}
);
}
}
On my HTML page, I am displaying four lines of information using the following code:
<mat-list-item>
<mat-icon mat-list-icon>done</mat-icon>
<div mat-line>Cronjob</div>
<div mat-line *ngIf='getTimestamp("cron"); else loading;'>Last executed: {{ getTimestamp("cron") | date:'dd.MM.yyyy HH:mm" }} uur</div>
</mat-list-item>
<mat-list-item>
<mat-icon mat-list-icon>done</mat-icon>
<div mat-line>Export process</div>
<div mat-line *ngIf='getTimestamp("export"); else loading;'>Last executed: {{ getTimestamp("export") | date:"dd.MM.yyyy HH:mm" }} uur</div>
</mat-list-item>
<mat-list-item>
<mat-icon mat-list-icon>done</mat-icon>
<div mat-line>Delta export</div>
<div mat-line *ngIf='getTimestamp("delta"); else loading;'>Last executed: {{ getTimestamp("delta") | date:"dd.MM.yyyy HH:mm" }} uur</div>
</mat-list-item>
<mat-list-item>
<mat-icon mat-list-icon>error</mat-icon>
<div mat-line>Import process</div>
<div mat-line *ngIf='getTimestamp("import"); else loading;'>Last executed: {{ getTimestamp("import") | date:"dd.MM.yyyy HH:mm" }} uur</div>
</mat-list-item>
The function getTimestamp returns the timestamp associated with the provided key:
getTimestamp(key: string):number|undefined{
if (this.dataResults[key] && this.dataResults[key]["timestamp"] !== undefined)
return (this.dataResults[key]["timestamp"]);
return (undefined);
}
Currently, only one value is displayed on the HTML page by calling getTimestamp("delta"). How can I display all four values at once?
If anyone could provide guidance or a solution for this issue, I would greatly appreciate it.
Best regards, Henning