How to use NODE to change some HTML before page load? - html

Question

Hi I have been trying to change some of my HTML elements using NODE.
So I'm using Node modules request and cheerio to get specific html elements before the page loads.
What I want to achieve is to get some data from my database and modify the html before it loads. Here is what I have:
app.js:
router.get('/goToSettings', (req, res) => {
//get session id
const id = 1;
//prepare SQL query
const sqlQuery = "SELECT first_name, last_name, username, email FROM myTable WHERE id = ?";
//Get data from DB by using the id retrieved from SESSION
getConnection().query(sqlQuery, [id], async (err, results, fields) => {
//Catch error with MySQL connection
if(err){
console.log(" > The connection have failed :( >" + err);
res.sendStatus(500);
}
var url = "http://host.com/settings.html";
request(url, async function(error, response, html){
if(!error){
var $ = cheerio.load(html);
//DEFAULT VALUES FROM HTML:
//a.value = Johnny
//b.value = Blue
//c.value = j.b#email.com
//Set new values from my DB
var a = $('input.settings_1').val(results[0].first_name);
var b = $('input.settings_2').val(results[0].last_name);
var c = $('input.settings_3').val(results[0].email);
console.log(a.val()); //myNewFirstName
console.log(b.val()); //myNewLastName
console.log(c.val()); //myNewEmail
await res.redirect('/accountSettings.html'); //VALUES of a,b,c remain (Johnny, Blue, j.b#email.com)
}else{
console.log("WRONG URL");
}
});
});
});
On the console.log data seems to be changed, everything looks okay, but when the page is redirected everything is back to default. I tried loading the page before the changes with no luck. That's where I figure out I have to use await/async so that the changes are made and then the redirect is called, but again nothing changes. Does the redirection resets the html file when loading?
Someone else suggested to use AJAX to perform this task, but I have no previous experience with it. I guess if this is impossible I will try and use it. It has been also suggested to me, that this should not be the way (NODE SHOULD NOT HANDLE THIS), let me know if you agree.
SOLUTION:
//cmd
npm i ejs
//app.js
app.set('view engine', 'ejs');
//Save Data in list of objects
let objects = [
{ value: results[0].first_name },
{ value: results[0].last_name },
{ value: results[0].email }
];
//REDIRECT PAGE WITH SOME DATA
res.render('accountSettings', {object: objects})
//REMEMBER TO CHANGE HTML TO .ejs EXTENSION.
//MOVE settings.ejs TO DIR:
//yourAppDir > views > settings.js
//settings.ejs
<input value="<%= object[0].value %>">
<input value="<%= object[1].value %>">
<input value="<%= object[2].value %>">

Answer 1

The core reason your approach isn't working is that you are creating a DOM from the contents of settings.html, manipulating it, but never saving it back to the file.
However, the approach itself is horribly flawed. It is inefficient and subject to race conditions. You need to change your approach.
Get rid of cheerio
Convert the HTML document to a template. There are plenty to choose from.
Replace the redirect with a call to render that passes your data into the template:
Such:
res.render('accountSettings.ejs', { settings: results[0] });