I have a cardsList that is an object got from a fetch(). I do a mapping on cardList and to each one I make a new request getting more information. I got a really strange situation: Map is synchronous, but it will first print 'Log2' and after 'Log1'.

After all, when I print cardsList I see all cardInfo object information, but if try to access it like cardsList[0].cardInfo I got undefined.

Do you know what is going on?

*Obs: I tried with await in fetchCardsInfo, but I got the same situation: I see the informations when I print but I cannot access it.

buscarCartoes = async () => {
    let cardsList = await CodeConnectRequests.fetchCardsList()

    cardsList.map((card) => {
        const cardInfo = CodeConnectRequests.fetchCardsInfo(card.cartao.tkCartao)
        cardInfo.then(data=>{
            console.log('Log1')
            card['cardInfo'] = data                   
        })

        return card
    })

    console.log('Log2')
    console.log(cardsList)// Here I can see cardInfo infs
    console.log(cardsList[0].cardInfo)// But hete cardInfo will be undefined
}

I have a cardsList that is an object got from a fetch(). I do a mapping on cardList and to each one I make a new request getting more information. I got a really strange situation: Map is synchronous, but it will first print 'Log2' and after 'Log1'.

After all, when I print cardsList I see all cardInfo object information, but if try to access it like cardsList[0].cardInfo I got undefined.

Do you know what is going on?

*Obs: I tried with await in fetchCardsInfo, but I got the same situation: I see the informations when I print but I cannot access it.

buscarCartoes = async () => {
    let cardsList = await CodeConnectRequests.fetchCardsList()

    cardsList.map((card) => {
        const cardInfo = CodeConnectRequests.fetchCardsInfo(card.cartao.tkCartao)
        cardInfo.then(data=>{
            console.log('Log1')
            card['cardInfo'] = data                   
        })

        return card
    })

    console.log('Log2')
    console.log(cardsList)// Here I can see cardInfo infs
    console.log(cardsList[0].cardInfo)// But hete cardInfo will be undefined
}

• javascript
• react-native

• 1 .map() returns a new array (and leaves the subject unchanged) – user5734311 Commented Jun 20, 2018 at 14:37
• Also you're trying to build the array elements inside the .then() callback, which does not make sense. You should await that fetchCardsInfo() request and build the array that way. – Pointy Commented Jun 20, 2018 at 14:41
• I think fetchCardsInfo is async function that's why Log2 is printed first then Log1. Can you please share what you are getting for console.log(cardsList) – Prasun Commented Jun 20, 2018 at 14:42

1 Answer 1

Promise.all is your friend

buscarCartoes = async () => {
    let cardsList = await CodeConnectRequests.fetchCardsList()

    // wait for nested requests to fulfill
    await Promise.all(cardsList.map(async (card) => { // Notice callback is async
        card.cardInfo = await CodeConnectRequests.fetchCardsInfo(card.cartao.tkCartao)
        return card
    })

    console.log('Log2')
    console.log(cardsList)// Here I can see cardInfo infs
    console.log(cardsList[0].cardInfo)// But hete cardInfo will be undefined
}