I am unable to refactor the code appropriately - node.js

Question

router.get('/',ensureLogin,async (req,res)=>{
try{
let result = await Mock.find();
result.forEach(async (e)=>{
if(e.attemptedBy.includes(req.user._id)){
let a_Mock = await User.findOne({_id:req.user._id,"attemptedMock.setNo":e.setNo},{attemptedMock:1});
e.status="Attempted";// not accessible on template as res.render executes first
e.marks = a_Mock.attemptedMock[0].totalMarks; //not accessible
console.log(a_Mock.attemptedMock[0].totalMarks);
}
else{
e.status = "Unattempted";//it is accessible
console.log('else block')
}
})
console.log("second log");
res.render('dashboard',{mocks:result});//I want this code to be executed when the "result" is updated by "forEach" block
}catch(e){
console.log(e);
}
})
Console logs as : 1. "else block" 2. "second log" 3."res.render executed" 4. "total marks", that concludes that res.render executed before "if block's" statement "e.status='Attempted'" so it is not accessible on template page. Please tell me how to refactor in a proper way.

Answer 1

If you are trying to do your loop one at a time and then call res.render() after the loop is done, then the easiest way to do that is to use a regular for loop as it will actually "wait" for the await. .forEach() is not promise-aware so, while the callback itself will wait for the await before it finishes, .forEach() itself will not and it will run the entire loop and then the next line after it will run and then each individual callback will finish sometime later. That will cause you to call res.render() before any of the .forEach() callbacks are done. For this reason, you pretty much never want to use .forEach() with promises as it's just not promise-aware. Instead, use a regular for loop like this:
router.get('/', ensureLogin, async (req,res) => {
try {
let result = await Mock.find();
for (let e of result) {
if (e.attemptedBy.includes(req.user._id)) {
let a_Mock = await User.findOne({_id:req.user._id,"attemptedMock.setNo":e.setNo},{attemptedMock:1});
e.status = "Attempted";
e.marks = a_Mock.attemptedMock[0].totalMarks; //not accessible
} else {
e.status = "Unattempted"; //it is accessible
}
}
console.log("second log");
res.render('dashboard', {mocks:result});
} catch(e) {
console.log(e);
res.sendStatus(500);
}
});
Note also that this code sends an error status in the catch block. You need to always send some response to the incoming http request.

Answer 2

inside for each, you can wrap everything in function.
refernece :https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all#:~:text=The%20Promise.,input%20iterable%20contains%20no%20promises.
processE = async(e)=>{
try{
if(e){
await something
e.something 1= somevalue
}else{
e.something 2= somevalue
}
return false
}catch(err){
//you can also throw depends on how u handle your err and type of promise.something you use
return err
}
}
let promises = []
e.forEach( (e)=>{
promises.push(processE(e))
})
/// Promise.something you can take a look at reference and use ethe one behavior that you prefer.
const result = await Promise.all(promises)
//render here