GreyGhost
GreyGhost

Reputation: 33

Array is empty after iterating data and pushing it to the array

I am trying to iterate data from DB and then pushing that data to an array. I did 2 console.log: 1 inside the loop and the other outside the loop. However, the one outside the loop got printed first with an empty array. But why and how does this happen? Everything seems to be looking fine :( Need help, please!

This is what I have:

app.get("/greybook/:bookid", (req, res) => {
    const usernameArr = [ ];
    Book.findById(req.params.bookid, (error, foundBook) => {
        for(let associate of foundBook.associates) {
            User.findById(associate, (error, foundUser) => {
                usernameArr.push(foundUser.username);
                console.log(usernameArr); // 1st console.log here...
            });
        }
        console.log(usernameArr); // 2nd console.log here...
        res.render("greybook/greybookshow", {book: foundBook, associates: usernameArr});    
    });
});

And this is the output from the console:

[ ]
[ 'grey_ghost' ]
[ 'grey_ghost', 'gerry' ]
[ 'grey_ghost', 'gerry', 'ghost' ]

Upvotes: 0

Views: 174

Answers (1)

dikuw
dikuw

Reputation: 1158

It's because the callback in Book.findById is not going to wait for the asynchronous call to User.findById, since it is already resolved at that point. I would rewrite this using async/await, which allows you to avoid "callback hell" and see the flow of the code more easily. Try this:

app.get("/greybook/:bookid", async (req, res) => {
  const usernameArr = [];
  let foundBook = await Book.findById(req.params.bookid);
  for (let associate of foundBook.associates) {
    let foundUser = await User.findById(associate);
    usernameArr.push(foundUser.username);
    console.log(usernameArr); // 1st console.log here...
  });
  console.log(usernameArr); // 2nd console.log here...
  res.render("greybook/greybookshow", {
    book: foundBook,
    associates: usernameArr
  });
});

Upvotes: 1

Related Questions