After reviewing my code, I discovered that it is executing too quickly for use in the Angular template. Here is an excerpt of the problematic code:
this.dataService.getSomeData().subscribe(async (res) => {
this.historyList = res;
this.historyList.forEach(async (element) => {
console.log('before')
let address = await this.geocode(element);
console.log(address)
element.address = address
});
console.log('after');
The geocode promise function causing the issue looks like this:
async geocode(item:Location):Promise<string> {
return await new Promise(async (resolve) => {
const geocoder = new google.maps.Geocoder();
const location = new google.maps.LatLng(item.latitude, item.longitude);
geocoder.geocode({ location: location }, async (results, status) => {
if (status === 'OK') {
resolve(results[0].formatted_address);
}
});
});
}
Currently, "Before" logs multiple times and the "After" log appears before any addresses are returned. I'm unsure where the problem lies; VS Code doesn't indicate any issues with the await on the geocode method.
Any insights would be greatly appreciated. Thanks