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

Bergi
– Bergi

2020-07-24 18:20:34 +00:00
Commented Jul 24, 2020 at 18:20 — Bergi
– Bergi, Commented Jul 24, 2020 at 18:20

antonku · Accepted Answer · 2020-07-24 17:08:53Z

2

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});
  });

answered Jul 24, 2020 at 17:08

antonku

7,7252 gold badges18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

frankied003 Over a year ago

No luck with this, I still get returned an empty object with a 500 server error.

frankied003 Over a year ago

nevermind, .map wasn't working because i was supposed to call data.docs.map, thank you!!

antonku Over a year ago

@frankied003 Thanks for getting back to this, glad to know that the issue is resolved

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related