render page after for loop is finished node.js

July 25, 2022, at 10:50 AM

I'm having an async problem, and I've followed a lot of articles online to try and get this issue fixed, but it hasn't done anything.

 async function getNumOfSessionForTrainerClientList(req, res, rows, allowedToAddMoreClients, alertMessage) {
     
      let sessionData2 = []
      var getNumOfSessionForTrainerClientList = "select * from SCHEDULE WHERE CLIENT_USERNAME = ? AND ASSIGNED_TRAINER = ?"
      mysqlconn.connect(async function(err) {
          if (err) {
            console.error('Database connection failed: ' + err.stack);
            return;
          }
        for (var i = 0; i < rows.length; i++) { 
        mysqlconn.query(getNumOfSessionForTrainerClientList, [rows[i].USERNAME, req.session.username], async function(err, sessionData) {
            if (err) {
                console.log(err);
            } else {
                for (var x = 0; x < sessionData.length; x++) {
                    sessionData2.push(sessionData[x].SESSION_STATUS)
                    console.log(sessionData2)
                }

            }
           
        })
}

})
await res.render('trainerclientlist.ejs', {data: rows, trainerFirstName: req.session.firstname, trainerLastName: req.session.lastname, allowedToAddMoreClients: allowedToAddMoreClients, profilePhoto: req.session.profilePhoto, alertMessage: req.session.selectedalertmessage, sessionData: sessionData2})
console.log(sessionData2)
}

what happens is that console.log(sessionData2) happens AFTER the page is rendered, await res.render('trainerclientlist.ejs', {data: rows, trainerFirstName: req.session.firstname, trainerLastName: req.session.lastname, allowedToAddMoreClients: allowedToAddMoreClients, profilePhoto: req.session.profilePhoto, alertMessage: req.session.selectedalertmessage, sessionData: sessionData2}). How can i fix this?

Answer 1

for (var i = 0; i < rows.length; i++) { // I'd avoid this line
// This will force query x-amount of times, 
  mysqlconn.query(getNumOfSessionForTrainerClientList, [rows[i].USERNAME, req.session.username], async function(err, sessionData) {
    if (err) {
      console.log(err);
    } else {
      // this could had been returned 200ms ->5s from when it's called
      for (var x = 0; x < sessionData.length; x++) {
        sessionData2.push(sessionData[x].SESSION_STATUS)
        console.log(sessionData2)
      }
      // I'd make your res.render call here or call for the next query till all are finished and when none left, now call res.render here...
    }
  })
}
// probably took 1-20ms to complete the loop and so sessionData2 is not ready..
console.log(sessionData);

The issue I see is that you run a loop around a query call, that does not wait for each callback, but fires each query and sometime in the future the callback is received. Given this happens all to fast, you can imagine the MySQL server responded back with a delay and it was that exactly that makes sessionData undefined. If you put a setTimeout of 5 seconds it should be defined because enough time was given (but don't do this... bad idea).

The biggest fix you can make is to set this up so you do not have to loop through rows.length... then you can simply run the res.render when MySQL responds back.