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

Question

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' ]

dikuw · Accepted Answer · 2020-07-25 11:29:55Z

1

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

answered Jul 25, 2020 at 11:29

dikuw

1,16814 silver badges25 bronze badges

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

5 Comments

dikuw Over a year ago

@GreyGhost don't forget to accept this answer if it fully answers your question or ask for more details if that would help.

GreyGhost Over a year ago

Would you suggest to stop using callbacks for everything and use async/await instead?

dikuw Over a year ago

@GreyGhost yes async/await is the preferred method in modern JavaScript. There is no need to use callbacks anymore.

GreyGhost Over a year ago

Last question. So if we want handle errors, simply put try catch on top of everything is that correct?

dikuw Over a year ago

@GreyGhost you could do try/catch on each controller function, but there's more elegant ways to do. It's too much to describe in a comment, but I recommend you check out this repo as an example: github.com/wesbos/app

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related