Access data from promise calling another promise

Question

I have a promise calling another promise but I don't know how to access the variable memberContractInfo where I am trying to store all of the promises. In the below code I have 2 questions labeled QUESTION 1 and QUESTION 2.

export function sendRequestAndLoadResponseForAllMemberContractInfo() {
    return function sendRequestAndLoadResponseForAllMemberContractInfoThunk(dispatch) {
        dispatch(getRequestsAction());

        return returnPromiseWithAllMemberContracts()
        .then(promiseWithAllMemberContracts => {

            // Step 1) get all member ids in response
            let contracts = promiseWithAllMemberContracts.response.contract;

            let memberContractInfo = []; // <==== I want to store result of all 2nd promises here

            for (let i in contracts) {
                const memberID = contracts[i].member_id;

                returnPromiseWithAllMemberInfo(memberID)
                .then(secondAPICallResponse => {
                    // Step 2) make 2nd API call using memberIDs as parameter
                    memberContractInfo.push(secondAPICallResponse);
                    console.log('secondAPICallResponse = ', secondAPICallResponse);

                    if (memberContractInfo.length === 2) {
                        console.log('memberContractInfo.length = 2'); 

                        // QUESTION 1: I can access memberContractInfo here but I there must also be
                        // another place I can access it right?

                    }
                })
            }
            console.log('memberContractInfo = ', memberContractInfo); // <== QUESTION 2: Why is this empty?
        });
    }
} 

function returnPromiseWithAllMemberContracts() {
    return fetchData('/api-proxy/contract/contract'); 
}

function returnPromiseWithAllMemberInfo(memberID) {
    let servicePath = '/api-proxy/member?id='.concat(memberID);
    console.log('fetchData(', servicePath);
    return fetchData(servicePath);
}

As always, `return` a promise from the `then` handler and you're done. Since you are creating promises in a loop, use `Promise.all` to await multiple promises. — Bergi, Apr 20 '16 at 00:52
Your Question 2 is a plain duplicate of [Why is my variable unaltered after I modify it inside of a function?](http://stackoverflow.com/q/23667086/1048572) — Bergi, Apr 20 '16 at 00:53
You read https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all? — Bergi, Apr 20 '16 at 00:53

Yashika Garg · Accepted Answer · 2016-04-25T17:28:46.887

0

You can access memberContractInfo anywhere inside they scope it is declared in then(promiseWithAllMemberContracts => {}.
memberContractInfo is empty in console.log('memberContractInfo = ', memberContractInfo); because you reach this statement before you actually resolved the promise.

As mentioned by @bergi you need to use Promise.all instead of loop.

Promise.all(contracts.map((contract) => {
    return returnPromiseWithAllMemberInfo(contract.member_id);
})).then(values => {
    // values has response from all the above API calls stored in it
    return values;
}).then((memberContractInfo) => {
    console.log(memberContractInfo.length); 
    // this will give you correct value.
})

edited Apr 25 '16 at 17:28

answered Apr 20 '16 at 06:14

Yashika Garg

2,346
2
15
17

How do I place your `Promise.all` code in the context of my thunk function? – letter Q Apr 20 '16 at 17:54
I think you meant to use returnPromiseWithAllMemberInfo(contract.member_id) instead of return PromiseWithAllMemberInfo(contract.member_id) – letter Q Apr 20 '16 at 18:11
1

You have to replace it with for loop. Also, if function name is `returnPromiseWithAllMemberInfo`, then it will be `return returnPromiseWithAllMemberInfo` – Yashika Garg Apr 22 '16 at 05:12

Access data from promise calling another promise

1 Answers1