I am attempting to show a date that corresponds to a specific order status. However, the current output is incorrect as it displays all dates for each order instead of just the relevant one.
https://i.sstatic.net/FRy0z.png
Below is my .ts code:
constructor(private dataService: DataService, private http: HttpClient) {
this.data = '';
this.error = '';
}
public statuses = [];
public dates = [];
private prepareDataRequest(): Observable<any> {
const dataUrl = '';
return this.http.get(dataUrl);
}
ionViewWillEnter() {
this.prepareDataRequest().subscribe(
data => {
this.statuses = data.output.Result.partsOrderTrackingListSequence
.map(item => {
if (item.status && item.status !== '') {
return item.status;
} else {
return '-';
}
});
this.dates = data.output.Result.partsOrderTrackingListSequence
.map(item => {
if (item.date && item.date !== '') {
return item.date;
} else {
return '-';
}
});
},
err => {
this.error = `An error occurred, the data could not be retrieved: Status: ${err.status}, Message: ${err.statusText}`;
}
);
}
My page.html code:
<ng-container *ngIf="!error; else errorContent">
<p *ngFor="let status of statuses let date of dates">
{{ status }} - {{date}}
</p>
</ng-container>
<ng-template #errorContent>
<p>
<span style="color: red;">{{error}}</span>
</p>
</ng-template>
If anyone can provide tutorials or guides on parsing and displaying JSON data in Angular Ionic pages, as well as modifying date display formats, I would greatly appreciate it. I am new to Angular and Typescript and have had difficulty finding helpful resources on these topics.