Display data in html/js file using NodeJs from mysql database

html mysql node.js

19,986

Solution 1

I´ll try to explain the way it works (with the consideration on you are now able to see the data on 'http://localhost:3000/show') . Plz, guys, correct me if I do explain something in the wrong way.

There, what you have in your code, is the

Server side code

mysql: Declares connection to database (this is your database connector)

node.js: Declares methods to put/push/get data from database (your server side as is)

express.js: Declares urls to put/push/get data from database (http/https router)

Then, if we check the code, we can see the declaration of a server api - for example app.get('/show')

There, what you are saying is that express, will use the url /show with the method GET

Here is where your client appears in scene. Now, we suppose your server is up and running, waiting to serve GET petitions on http://localhost:3000/show.

If that is correct, when clicking the link you should see the user names, and now you will need an http client to connect to your http server side.

The way you can grab data on your HTML client from your server, is javascript.

Then, you will need to build an HTML file, that will also contain a javascript script (in my example written in angular).

The HTML (this is written in jade. you can convert it) should look like this:

Client HTML Code You should create an index.html file, and paste this code

<!doctype html>
<html ng-app>
  <head>
    <title>My AngularJS App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  </head>
  <body>
  <div ng-controller="MyCtrl">
    <table>
      <thead>
        <tr>
          <th>
            <p>Name</p>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="user in users">
          <td> 
            <p>{{user}}</p>
          </td>
        </tr>
      </tbody>
    </table>
   </div>
    <script>
     var myApp = angular.module('myApp',[]);
     function MyCtrl($scope, $http) {
     //This method will call your server, with the GET method and the url /show
     $http.get("http://localhost:3000/show").then(function(success){
      if(success.data.length>0)
      {
         $scope.users=success.data;
      }
     });
     }
   </script>
  </body>
 </html>

This code should capture the data and show a row in the table for every name in the database.

Hope it helps, at least as a clear explanation of how the full stack (client-server) works.

Solution 2

May be you can use view engine such As EJS, Jade to render data from node to the front end.

If you want to render the data on the html page, i will do it like http://localhost:3000/show : with json -resonponse

var express = require('express');
var app = express();

require('json-response');

app.get('/', function(req, res){
  res.ok({foo: 'bar'}, 'hello world');
});

i will return json from the link and in Index.html with the help of jquery/Ajax will hit the link , retrieve the value and show it on HTML

19,986

Author by

nkkumawat

Updated on June 16, 2022

Comments

nkkumawat almost 2 years

My index.js file is

var express         = require('express');
var  app            = express();
var path            = require('path');
var router          = express.Router();
var data            = require('./data/jsonData');
var createDatabase  = require('./data/db');
var careateTable    = require('./data/createTable');
var insert          = require('./data/insert');
var bodyParser      = require('body-parser');
var select          = require('./data/select');


app.use(express.static(path.join(__dirname, 'www')));
app.use(express.static(path.join(__dirname, 'form')));
app.use(bodyParser());
app.get('/' , function (req , res) {
    res.sendFile(path.join(__dirname + '/www/index.html'));
});

app.get('/data' ,function (req , res) {
    res.json(data);
});
app.get('/form' ,function (req , res) {
    res.sendFile(path.join(__dirname + '/form/index.html'));
});
app.post('/form' ,function (req , res) {
    console.log(req.body.user);
    console.log(req.body.password);
    insert.insertModule(req.body.user , req.body.password);
    res.sendFile(path.join(__dirname + '/www/index.html'));
});
app.get('/show' , function (req , res) {
    var i ;
   select.select( function (err, results) {
       if (err == 'error') {
           console.log(err);
       } else {
           console.log(results);
           res.send(results.username);
       }
   });

});

app.listen(3000);
console.log("App is listning on port 3000");

and select.js is

var mysql = require('mysql');
var con = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database: "NodeDataBase"
});
con.connect(function (err) {
    if (err) throw err;
    console.log("Connected!");
});

module.exports  = {
    select: function (callback) {
        var sql = "SELECT username , password FROM login ";
        con.query(sql, function (err, result , fields) {
            if (err) {
                callback("error", err)
            } else {
                callback("success", result)
            }
        });
    }
}

I want to show the results object data to html file , So how can i do this please suggest me.

from a get request /show it will show all userdata fetched from the database