I am currently developing a web application using ASP.NET Core - Angular. The app allows users to select a customer as the starting point and then calculates the distance & duration to other customers using Google Maps Distance Matrix Service. Although I am able to retrieve the values successfully (based on my console log), there is a lag when rendering the distance & duration values in the template using angular interpolation. Additionally, the table containing this information is only displayed after clicking a button, triggered by setting isFindButtonClicked to true.
- Can someone assist me in identifying and resolving this issue?
https://i.sstatic.net/RbxAA.png
customers: Array<Customer> = [];
nearbyCustomers: Array<Customer> = [];
getCustomers() {
this.customerService.getAll()
.subscribe( result => {
this.customers = result;
}, error => {
this.alertService.error(error._body);
this.router.navigate(['/home']);
});
}
ngOnInit() {
this.getCustomers();
}
Typescript function for calculating distance/duration:
findNearbyCustomers(selectedId: number) {
this.isFindButtonClicked = true;
this.nearbyCustomers = this.customers;
var origin = this.customers.find(c => c.id == selectedId);
var originLatLng = origin.latitude.toString()+","+origin.longitude.toString();
var service = new google.maps.DistanceMatrixService();
for (let x = 0; x < this.customers.length; x++) {
console.log(this.customers[x].id);
var destinationLatLng = this.customers[x].latitude.toString()+","+this.customers[x].longitude.toString();
service.getDistanceMatrix({
origins: [originLatLng],
destinations: [destinationLatLng],
travelMode: google.maps.TravelMode.DRIVING
}, (response, status) => {
if (status.toString() == 'OK') {
console.log('Distance: '+response.rows[0].elements[0].distance.text+', Duration: '+response.rows[0].elements[0].duration.text);
this.nearbyCustomers[x].distance = response.rows[0].elements[0].distance.text;
this.nearbyCustomers[x].duration = response.rows[0].elements[0].duration.text;
console.log('DURATION: '+this.nearbyCustomers[x].duration+', DISTANCE:'+this.nearbyCustomers[x].distance);
}
})
}
}
Snippet from the angular template:
<tbody>
<tr *ngFor="let nearbyCustomer of nearbyCustomers">
<td>{{ nearbyCustomer.businessName }}</td>
<td>
<p>{{ nearbyCustomer.streetNumber + ' ' + nearbyCustomer.streetName + ', ' + nearbyCustomer.suburb }}</p>
<p>{{ nearbyCustomer.city + ' ' + nearbyCustomer.postCode + ', ' + nearbyCustomer.country }}</p>
</td>
<td>{{ nearbyCustomer.contactPerson }}</td>
<td>{{ nearbyCustomer.contactNumber }}</td>
<td>{{ nearbyCustomer.email }}</td>
<td>{{ nearbyCustomer.distance }}</td>
<td>{{ nearbyCustomer.duration }}</td>
</tr>
</tbody>
- In a previous attempt, I used an if statement
to exclude the selected customer (origin) from the calculations. However, when trying to assign a value to object property and render it, I encountered aif (this.customers[x].id != this.selectedDeliveryDestinationId)
error, which suggests index manipulation issues. What would be the best approach to exclude one item from the array effectively? Alternatively, is it possible to hide a specific row in the HTML instead?Cannot set property 'distance' of undefined
Thank you.