Fetch inside map in react

Question

I'm trying to fetch each campaign stats by its campaignId. campaignId is pulled from first api call and then while iterating i'm passing that id to next api call for each campaign stats. First api call gives the right result but while iterating and fetching it from second api call it throws and error of

Unhandled Rejection (TypeError): ids.map is not a function

export const loadStats = async () => {
    const ids = await (await fetch('https://api.truepush.com/api/v1/listCampaign/1', {
        method: "GET",
        headers: {
            Authorization: `${TOKEN}`,
            "Content-Type": "application/json"
        }
    })).json()

    const data = Promise.all(
        ids.map(async (i) => await (await fetch(`https://api.truepush.com/api/v1/campaignStats/${i.data.campaignId}`, {
            method: "GET",
            headers: {
                Authorization:`${TOKEN}`,
                "Content-Type": "application/json"
            }
        })).json())
    )
    return data
};

I'm expecting all such stats while iterating:

https://i.sstatic.net/8kjwy.png

https://i.sstatic.net/VJni7.png (result of listCampaign/1)

Answer 1

Try this:

export const loadStats = async () => {
    const ids = await (await fetch('https://api.truepush.com/api/v1/listCampaign/1', {
        method: "GET",
        headers: {
            Authorization: `${TOKEN}`,
            "Content-Type": "application/json"
        }
    })).json()

    const data = Promise.all(
        ids.data.map(async (i) => await (await fetch(`https://api.truepush.com/api/v1/campaignStats/${i.campaignId}`, {
            method: "GET",
            headers: {
                Authorization:`${TOKEN}`,
                "Content-Type": "application/json"
            }
        })).json())
    )
    return data
};