Javascript map in map await for responses

Question

I have an array of questions.
Each question has some answers which are some files to upload.
Everything goes well instead of the fact that the API call is not waiting for Promise.all to finish.

Here are the steps:

1. map through questions array, if a question is image type, then get all the files and try to upload them.

2. after upload resolve all the promises from upload and add an answer to that question the result of Promise.all();

3. After the loop through all the questions is ready, make an API call to save into DB which now is not waiting to upload all the files and resolve everything in that array.

export function sendReview (taskId, companyId, questions, navigation) {
  return async (dispatch) => {
    
    dispatch(actions.sendReview.pending());
    try {
      let user = await getUser();
      user = JSON.parse(user);
      
      questions.map(async question => {
        if (question.type === 'image') {
          let images = question.answer;
          if (images.length > 0) {
            const results = images.map(async image => {
              return await imageApi.upload(image).then(res => {
                return res.url;
              });
            });
            question.answer = await Promise.all(results).then(completed => {
               return completed;
            });
          }
        }
      });
      
      const data = await tasksApi.sendReview({
        task_id: taskId,
        company_id: companyId,
        user_id: user.id,
        questions: JSON.stringify(questions)
      });

      if (data.status === 201) {
        markAsCompleted(taskId);
        navigation.navigate('MyTasks');
        dispatch(actions.sendReview.success({}));
      }
      else {
        dispatch(actions.sendReview.error());
      }
    } catch (err) {
      dispatch(actions.sendReview.error(err));
    }
  };
}

Here is the function used.

How can I make sure that all the items in .map() are ready and just after that make API call?

Answer 1

Use Promise.all to await promises in an array

Promise.all(questions.map(...))

Answer 2

To give you an example from code I made quite some time ago:

await Promise.all((await readdir(repoPath, "utf8")).map(async file => {
  if (!/\.mjs$/.test(file)) return;
  const filePath = `${repoPath}/${file}`;
  log(`importing "${file}"`);

  const module = await import(filePath);

  const meta = {
    repository,
    file,
    filePath,
    description: module.description || {}
  };

  module.default((...args) => createModule(meta, ...args));
}));

If you have asyncronous mapping handlers, you'll need to keep in mind, the content of the resulting map contains promises.

Promise.all() will help you with that.

In your case, all you need to do is change:

questions.map(async(question) => {
  if(question.type === 'image'){
    let images = question.answer;
    if(images.length > 0){
      const results = images.map(async (image) => {
        return await imageApi.upload(image).then(res => {
          return res.url;
        });
      });
      question.answer = await Promise.all(results).then((completed) => {
        return completed
      });
    }
  }
});

as follows:

await Promise.all(questions.map(async(question) => {
  if(question.type === 'image'){
    let images = question.answer;
    if(images.length > 0){
      const results = await Promise.all(images.map(async (image) => {
        return await imageApi.upload(image).then(res => {
          return res.url;
        });
      }));
      question.answer = results.then((completed) => {
        return completed
      });
    }
  }
}));