CODEWITHSUNDEEP
javascriptreactjsaxios
WebStormer
WebStormer

Reputation: 256

React JS multiple API calls, data undefined or unexpected reserved word 'await' mapping through the data:

I'm creating a JS function that will make a call to an API, loop through the returned data and perform another call to retrieve more information about the initial data (for example where the first call return an ID, the second call would return the name/address/number the ID corresponds to). Positioning the async and await keywords though, have proven to be way more challenging than I imagined:

 useEffect(() => {
    const getAppointments = async () => {
        try {
          const { data } = await fetchContext.authAxios.get('/appointments/' + auth.authState.id);
       

        const updatedData = await data.map(value => {
            const { data } = fetchContext.authAxios.get('/customerID/' + value.customerID);
              return {
                ...value, // de-structuring
                customerID: data
                }
            }
        );
        
        setAppointments(updatedData);
        } catch (err) {
            console.log(err);
        }
    };

    getAppointments();
    }, [fetchContext]);

Everything get displayed besides the customerID, that results undefined. I tried to position and add the async/await keywords in different places, nothing works. What am I missing?

Upvotes: 0

Views: 467

Answers (1)

iagowp
iagowp

Reputation: 2494

map returns an array, not a promise. You need to get an array of promises and then solve it (also, if your way worked, it would be inefficient waitting for a request to then start the next one.)

const promises = data.map(async (value) => {
  const { data } = await fetchContext.authAxios.get('/customerID/' + value.customerID);
  return {
    ...value,
    customerID: data
  };
});

const updatedData = await Promise.all(promises);

Upvotes: 2

Related Questions