Call an async function in foreach loop and return array once loop is done

Question

I'm trying to request data from an API in a foreach loop and push that data to an array and then return that array at the end. Here is my code:

db
            .collection('posts')
            .orderBy('createdAt', 'desc')
            .limit(10)
            .get()
            .then((data) => {
                let posts = [];
                data.forEach((doc) => {
                    db
                        .doc(`/users/${doc.data().userHandle}`)
                        .get()
                        .then((userDoc) => {
                            posts.push({
                                postId: doc.data().id,
                                userHandle: doc.data().userHandle,
                                userImageUrl: userDoc.data().imageUrl,
                                imageUrl: doc.data().imageUrl,
                            });
                        })
                })
                return res.json(posts);
            })
            .catch((err) => {
                console.error(err);
                res.status(500).json({ error: err.code});
            });

From this, the posts array return en empty array or object, even when i replace return res.json(posts) with

.then(() => {
return res.json(posts);
})

Any help is awesome!!!

[Never use `forEach` with an async callback](https://stackoverflow.com/q/37576685/1048572) — Bergi, Jul 24 '20 at 18:20

score 2 · Accepted Answer · answered Jul 24 '20 at 17:08

The array is empty because by the time the response is sent, promises with posts are still pending resolution.

In order to fix this issue, you can collect all the promises in an array using .map(), wait for them to resolve with help of Promise.all() and send the response after that:

db
  .collection('posts')
  .orderBy('createdAt', 'desc')
  .limit(10)
  .get()
  .then((data) => {
    const promises = data.map((doc) => {
      return db
        .doc(`/users/${doc.data().userHandle}`)
        .get()
        .then((userDoc) => {
          return {
            postId: doc.data().id,
            userHandle: doc.data().userHandle,
            userImageUrl: userDoc.data().imageUrl,
            imageUrl: doc.data().imageUrl,
          };
        })
    });
    Promise.all(promises).then(posts => {
      res.json(posts);
    })
  })
  .catch((err) => {
    console.error(err);
    res.status(500).json({ error: err.code});
  });

No luck with this, I still get returned an empty object with a 500 server error. — frankied003, Jul 24 '20 at 18:20
nevermind, .map wasn't working because i was supposed to call data.docs.map, thank you!! — frankied003, Jul 27 '20 at 16:35
@frankied003 Thanks for getting back to this, glad to know that the issue is resolved — antonku, Jul 27 '20 at 16:57

Call an async function in foreach loop and return array once loop is done

1 Answers1