如何使用 array.map 方法获取数组中每个元素的数据

Question

I want to fetch data for every object in an array and return an array of new objects with the previous and newly fetched data.I got stucked on getting my result array as my function is returning an array of resolved undefined promises. I am using a flight search api thats using the apca function for fetching

export const searchApcaLocation = async (dataArr,setDeals) => {
    const promises = await dataArr.map(async item => {
        apca.request(item.destination);
        apca.onSuccess = (data) => {
            return fetch('http://localhost:3050/googlePlaceSearch',{
                        method:"post",
                        headers:{'Content-Type':'application/json'},
                        body:JSON.stringify({
                            cityName:data.airports[0].city
                            })
            })
            .then(res => res.json())
            .then(imagelinkData => {
                const locationObject = {
                    data: item,
                    imagelink: imagelinkData.link
                }
                return locationObject
            })
            .catch(err => console.log('error on image search',err))
        };
        apca.onError = (data) => {
            console.log('error',data)
        };
    })
    const results = await Promise.all(promises)
    return results
}

can someone guide me please on what am I doing wrong?

edit: as I am trying to fix it realized the problem is I am not returning anything in my map function but if trying to return the apca.onSuccess I am getting an array of functions

Answer 1

just return is missing before fetch function. since you're not returning your promise result it's giving undefined.

export const searchApcaLocation = async (dataArr,setDeals) => {
    const promises = await dataArr.map(async item => {
        apca.request(item.destination);
        apca.onSuccess = (data) => {
            return fetch('http://localhost:3050/googlePlaceSearch',{
                        method:"post",
                        headers:{'Content-Type':'application/json'},
                        body:JSON.stringify({
                            cityName:data.airports[0].city
                            })
            })
            .then(res => res.json())
            .then(imagelinkData => {
                const locationObject = {
                    data: item,
                    imagelink: imagelinkData.link
                }
                return locationObject
            })
            .catch(err => console.log('error on image search',err))
        };
        apca.onError = (data) => {
            console.log('error',data)
        };
    })
    const results = await Promise.all(promises)
    return results
}

Answer 2

The issue in your case might be, that you are using async/await and then blocks together. Let me sum up what is happening:

1) you await dataArray.map

2) within the map callback, you use the onSuccess method of apca

3) within this method you are using then blocks which won't await until you got a response.

At this point where you return the locationObject, your function already reached the return statement and tries to return results. But results are of course undefined because they never get resolved at all.

Also, keep in mind that your function returns another promise because you used async/await which you have to resolve where you imported it.

Cheers:)