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

Question

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>

Does this answer your question? Display mysql in a html table with Node.js — nbk
– nbk, Commented Mar 30, 2021 at 17:59

rook218 · Accepted Answer · 2021-03-30 18:03:11Z

1

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.

answered Mar 30, 2021 at 18:03

rook218

6921 gold badge8 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

snir.hak Over a year ago

Thank you, you helped me a lot

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related