3

I am trying to extract data from MySQL and display it on my HTML page, but when I run the code below on my browser http://localhost:3000, the data does not display on my page. I would appreciate if somebody could help me solve this problem.

index.html

<!DOCTYPE>
<html>
    <head>
        <title>Data from MySQL</title>
    </head>
    <body>
        <div id="output_message"></div>
    </body>
</html>

app.js

var express = require('express');
var app = express();
var mysql = require('mysql');
var bodyParser = require('body-parser');
var urlencodedParser = bodyParser.urlencoded({ extended: false });

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use('/', express.static(__dirname + '/'));
app.set('view engine', 'html');

var connection = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database: "mywebsite"
});

connection.connect();

app.get('/',(req, res) => {
    connection.query("SELECT * FROM chat",(err, result) => {
        if(err) {
            console.log(err); 
            res.json({"error":true});
        }
        else { 
            console.log(result); 
            res.json(result); 
        }
    });
});

app.listen(3000, function () {
    console.log('Connected to port 3000');
});
Improve this question
7
  • can you tell us if you get any error in the console? Commented May 6, 2018 at 16:34
  • I've got no errors in the console Commented May 6, 2018 at 16:34
  • well the reason is because you are sending an empty html file through GET method Commented May 6, 2018 at 16:37
  • How do I send it to my html file? Commented May 6, 2018 at 16:38
  • include the POST method logic in the GET method, and remove the post Commented May 6, 2018 at 16:41

1 Answer 1

Reset to default
1

There are multiple factors you need to consider :

1 - When you want to use a POST method sent through a HTML file you must have a

<form action="Name of your processing file" method="POST">YOUR FORM HERE</form>

However; if you simply trying to call a db and get your data then just perform

your logic within the GET method as following:

app.get('/',(req, res) => {
    connection.connect(function(err) {
    if(err) throw err;
        else {
            connection.query("SELECT * FROM chat",(err, result) => {
                if(err) {
                    console.log(err); 
                    res.json({"error":true});
                }
                else { 
                    console.log(result); 
                    res.json(result); 
                }
            });
        }
    });
});

*** You may ask what about the index.html . There are two responses for that :

1 - Use res.sendFile(__dirname + "/YOURPAGE-Name.html"); when you want to send a file

as a result

Example: 

app.get("/",(req, res) => {
    res.sendFile(__dirname + "/Welcome.html");
});

Welcome.html

<!DOCTYPE>
<html>
    <head>
        <title>Data from MySQL</title>
    </head>
    <body>
        <p>Welcome to my page</p>
    </body>
</html>

2 - Use res.sendFile(__dirname + "/index.html"); when you want to get the

initial page so then you can have forms within the application that you want to process

Example: 

app.get("/",(req, res) => {
    res.sendFile(__dirname + "/index.html");
});

index.html

<!DOCTYPE>
<html>
    <head>
        <title>Data from MySQL</title>
    </head>
    <body>
        <form action="/" method="post">
          //YOUR FORM HERE 
        </form>
    </body>
</html>
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

The data still doesn't display on my html page. I haven't got any errors either. I've edited my code so you can see what I have changed.
remove the first GET method. You only need the second get method to get the data from db and display it
I've removed it, but I'm still not getting the data. I've only got the second get method.
modify this and lets see if you can even connect to db.... connection.connect(function(err){if(err) throw err; console.log("connected");
It says "connected" on the server response
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.