How to put data from sql into a table in html using node.js

I have DATA stored in mysql. And I want to display it in a table in HTML. I am currently using NODE.JS AND EXPRESS. How can I save the DATA that comes in and put it into a table in HTML. I was trying to find a way to save this DATA, And use a MAP loop inside a script tag in HTML, But I could not send the DATA to HTML .

app.js

const mysql = require('mysql')
const SQL = require('sql-template-strings')
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
const port = 3000
const Joi = require('joi');

app.use(bodyParser.urlencoded({ extended: true }))


// connect to MySQL
const con = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'pass123',
    database: 'carStorege'
})

con.connect((err)=> {
    if(err) throw err;
    else console.log('connect to DB !')
})

// seva data from database
con.query("SELECT * from Cars", (err, result, fields) => {
    if(err) console.log(err);
    else {
         //save the data
        const data = result
    }
})
// express

    // url to see all the car in table

    app.get('/all', (req, res) => {
        con.query("SELECT * from Cars", (err, result, fields) => {
            if(err) throw err;
            else {
                res.sendFile(__dirname+'/allCars.html')
            }
        })

    })


app.listen(port, () => console.log('srever is live'))

and this is the HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <tr>
        <th>Car manufacturer</th>
        <th>Car model</th>
        <th>Color</th>
        <th>Yaer</th>
        <th>Price</th>
        <th>Door number</th>
    </tr>
    // here the data shuld be
</body>
</html>

Answer

This needs to be done in front-end javascript. The JS on your webpage (connected to the HTML) needs to request the data from your Node server, then doSomething with it. It will likely be in an array, so you can just loop through the array, create a new HTML row with the data in it, and append that to the correct spot in your table. Something like:

fetch('http://yourWebSite.com/api/all')
    .then(response => response.json())
    .then(data => {
        console.log(data);
        let table = document.querySelector('#tableId')
        data.forEach(row => {
            let tr = document.createElement('tr');
            tr.appendChild(document.createElement('th').innerText(row.item1))
            tr.appendChild(document.createElement('th').innerText(row.item2))
            tr.appendChild(document.createElement('th').innerText(row.item3))
            table.appendChild(tr)
        })
});

This is where frameworks come in handy, since a library like React, Vue, or Angular have rendering strategies that are designed to handle this.