Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 804
nkkumawat Avatar asked Jul 04 '17 17:07

nkkumawat


People also ask

How show data from database in HTML?

First, connect to the database: $conn=mysql_connect("hostname","username","password"); mysql_select_db("databasename",$conn); You can use this to display a single record: For example, if the URL was /index.


2 Answers

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.

like image 57
Alejandro Teixeira Muñoz Avatar answered Nov 15 '22 04:11

Alejandro Teixeira Muñoz


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

like image 31
LogicBlower Avatar answered Nov 15 '22 04:11

LogicBlower