render page after for loop is finished node.js

49
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.

Rent Charter Buses Company
READ ALSO
overwrite or reinstall nodejs and npm on windows

overwrite or reinstall nodejs and npm on windows

Long story short, I'd like to reinstall nodejs on my windows systemHowever after I downloaded the msi file and ran it, it failed complaining about cannot find D drive

80
Call a function according to its string name [duplicate]

Call a function according to its string name [duplicate]

I have a code which would be very repetitive, which according to the name of the string of an array executes one function or another

98
Cors not allowed while using Axios

Cors not allowed while using Axios

Hey I was working with fetch a normal fetch to request my API in my server, and It was working, but I found out that Axios is easier, so I tried to replace every fetch, but it looks like xhr doesn't work because of cors,

72