How to access the values inside resolved promises?

Question

I'm having difficulty accessing the values from getPeople(0,4).

function getPeople(start, end) {
    const peopleArray = [];
    for (let i = start; i <= end; i++) {
      peopleArray.push(
        axios.get(`https://www.testsite.net/api/test/workers/${i}`)
      );
    }
    return peopleArray;
  }

  useEffect(() => {
    Promise.all([getData(), getPeople(0, 4)]).then(item => {
      //console.log(item[0].data.orders); //
      setData(item);
      setPersonData(item);
    });
  }, []);

item[0] works fine. Here's the result I'm getting when I console.log(item[1]) How can I access the data?

item[1] is an array of promises.

Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — zero298, Feb 19 '20 at 15:19
By using `then` or `await` in an `async` function. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises — DaCurse, Feb 19 '20 at 15:19
It looks like `getPeople` is returning another array of promises? Maybe you need to wrap _another_ `Promise.all` around `item[1]`... but that's heading towards code smell territory — James Thorpe, Feb 19 '20 at 15:22
Are you saying `item[1]` is itself an array of promises? You already know how to access the value of a promise: `.then`. — Felix Kling, Feb 19 '20 at 15:23
Does `getPeople` return a promise (that returns the array of promises) or just the array of promises directly? — Will, Feb 19 '20 at 15:28
@WillCain I added the code to the question. It's just an array — Wesley Bonneville, Feb 19 '20 at 15:30
Now you've edited to show that `getPeople` itself doesn't return a promise, using the spread operator as some comments/answers show is ok and isn't a code smell as per my original comment...! — James Thorpe, Feb 19 '20 at 15:36

score 3 · Accepted Answer · answered Feb 19 '20 at 15:35

3

You simply need to spread the array returned from getPeople() like so:

Promise.all([getData(), ...getPeople(0, 4)]).then(item => {
    console.log(item);
});

Promise.all() expects an array of Promise, you were passing an array containing another array.

answered Feb 19 '20 at 15:35

emeraldsanto

4,330
1
12
25

score 0 · Answer 2 · answered Feb 19 '20 at 15:26

The getPeople function returns an array of promises.

If you want to await those promises in the Promise.all call, one option is to:

  useEffect(() => {
    Promise.all([getData(), ...getPeople(0, 4)]).then(item => {
      //console.log(item[0].data.orders);  
      console.log(item[1]); // this will effectively output the people 0 object
      setData(item);
      setPersonData(item);
    });
  }, []);

The above will receive as item[0] the resolved value from the promise of getData (which sounds expected already). Then item[1] through item[5] will be the 5 people objects you seem to be expecting.

score 0 · Answer 3 · answered Feb 19 '20 at 15:58

This is can be made more readable using an async function in useEffect

//make sure this actually returns the people rather than a load of promises
async function getPeople(start, end) {

    const peopleArray = [];        
    for (let i = start; i <= end; i++) {
      let person = await axios.get(`https://www.hatchways.io/api/assessment/workers/${i}`);
      peopleArray.push(person);
    }
    return peopleArray;

}

//then in useEffect you need to create another async function
useEffect(() => {
    async function getDataAndPersons() {

      const data = await getData();
      setData(data);
      const people = await getPeople(0, 4);
      people.forEach(person => setPersonData(person));

    };
    getDataAndPersons();
}, []);

How to access the values inside resolved promises?

3 Answers3