How to fetch data on every element in an array using array.map method

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

Shubham · Accepted Answer · 2020-04-13 10:27:54Z

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
}

edited Apr 13, 2020 at 10:27

answered Apr 13, 2020 at 10:22

Shubham

7794 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

alex amirov Over a year ago

just tried it but I am getting an array with undefined values instead of objects. after console logging the steps I found out my results const is not awaiting for the promises const to fetch the data

Shubham Over a year ago

@alexamirov can tell what is apca and add dummy dataArr. I'll share proper code block

r4pt0s · Accepted Answer · 2020-04-13 12:26:04Z

1

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 :)

answered Apr 13, 2020 at 12:26

r4pt0s

8910 bronze badges

2 Comments

alex amirov Over a year ago

Hey, just moved all my thens to async/await but got same issue where my function is returning undefined because its not resolving the results

r4pt0s Over a year ago

Maybe the apca object is not designed to handke async await. Did you try to console.log(locationObject) right before you return it? Just to make sure you get a response.

Collectives™ on Stack Overflow

How to fetch data on every element in an array using array.map method

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related