So, I have an array of object like this:
const data = [{
kind: 'youtube#playlistItem',
etag: 'G5T4NZiLhIOm0vpgQ7BsBUkSJP8',
id: 'RRLr_y-OL3Q',
snippet: {
publishedAt: '2022-10-09T12:28:36Z',
channelId: 'UCcAd5Np7fO8SeejB1FVKcYw',
title: 'How To Eat When You Can’t Show Your Face!! Medan Street Food Tour in Indonesia!!',
channelTitle: 'Best Ever Food Review Show',
playlistId: 'UUcAd5Np7fO8SeejB1FVKcYw',
position: 0,
videoOwnerChannelTitle: 'Best Ever Food Review Show',
videoOwnerChannelId: 'UCcAd5Np7fO8SeejB1FVKcYw',
address: [
'Jl. Mahkamah No.74c, RT.02, Mesjid, Kec. Medan Kota, Kota Medan, Sumatera Utara 20212, Indonesia',
'Jl. Sunggal No.14, Sei Sikambing B, Kec. Medan Sunggal, Kota Medan, Sumatera Utara 20118, Indonesia'
]
},
contentDetails: {
videoId: 'RRLr_y-OL3Q',
videoPublishedAt: '2022-10-09T12:28:36Z'
}
},
{
kind: 'youtube#playlistItem',
etag: '5_4yyrIK1DBbcLsSWOgtt5mHQrA',
id: 'vfLdGddGwOw',
snippet: {
publishedAt: '2022-08-28T12:30:10Z',
channelId: 'UCcAd5Np7fO8SeejB1FVKcYw',
title: 'Central Vietnamese Street Food!! Noodles from Actual Heaven!!',
channelTitle: 'Best Ever Food Review Show',
playlistId: 'UUcAd5Np7fO8SeejB1FVKcYw',
position: 0,
videoOwnerChannelTitle: 'Best Ever Food Review Show',
videoOwnerChannelId: 'UCcAd5Np7fO8SeejB1FVKcYw',
address: [
'49/3 Trần Hưng Đạo, Sơn Phong, Hội An, Quảng Nam 56000',
'Lê Thánh Tông street, An Phú ward, Tam Kỳ city, Quảng Nam Province'
]
},
contentDetails: {
videoId: 'vfLdGddGwOw',
videoPublishedAt: '2022-08-28T12:30:10Z'
}
}
]
I would like to geocode the address in data.snippet.address using fetch function to get the coordinate of said address. After fetching the coordinate, I'd like to replace address string in data.snippet.address with object containing said address string and array of the address' latitude and longitude. Here's my function to do it:
const geocode = async(element) => {
const baseURL = `http://api.positionstack.com/v1/forward`;
const params = {
access_key: 'some_api_key',
query: element,
limit: 1,
country_module: 0,
sun_module: 0,
timezone_module: 0,
bbox_module: 0,
};
try {
const fetchGeocode = await axios.get(baseURL, {
params
});
const geocodedData = fetchGeocode.data.data[0];
const coordinate = [geocodedData.latitude, geocodedData.longitude];
return coordinate;
} catch (error) {
console.log(error);
}
};
const addGeocode = async(array) => {
array.forEach((obj) => {
obj.snippet.address = obj.snippet.address.map((str) => ({
location: str,
geocode: geocode(str),
}));
});
return await array;
};
However, when I run the code, it return the geocoding result as Promise { } eventhough I already use async await.
// Existing result
[{
location: 'Jl. Mahkamah No.74c, RT.02, Mesjid, Kec. Medan Kota, Kota Medan, Sumatera Utara 20212, Indonesia',
geocode: Promise { < pending > }
},
{
location: 'Jl. Sunggal No.14, Sei Sikambing B, Kec. Medan Sunggal, Kota Medan, Sumatera Utara 20118, Indonesia',
geocode: Promise { < pending > }
}
]
// Expected result
[{
location: 'Jl. Mahkamah No.74c, RT.02, Mesjid, Kec. Medan Kota, Kota Medan, Sumatera Utara 20212, Indonesia',
geocode: [3.574831, 98.686322]
},
{
location: 'Jl. Sunggal No.14, Sei Sikambing B, Kec. Medan Sunggal, Kota Medan, Sumatera Utara 20118, Indonesia',
geocode: [3.587848, 98.642411]
}
]
Any idea why this happens and how to solve it?