javascript - JS & NodeJs: Read table from DB with AJAX and display in table -
i’m working on project nodejs , i’m trying read mysql database ajax display db table rows in html table.
i think i’m having problem how handle/store data once out of db.
here structure of db(completely fictitious data of course), , code far:
also here if console.log(serverdata); seems me data should in kind of nested array or kind of structure allows me identify value in array i’m accessing.
server.js
var http = require('http'); var fs = require('fs'); var mysql = require('mysql'); var url = require('url'); var mime = require('mime'); var config = json.parse(fs.readfilesync('config.json')); var host = config.host; var port = config.port; var connection = mysql.createconnection({ host : 'localhost', user : 'root', password : 'root', database : 'innovation_one' }); function connecttodb(){ connection.connect(function(err){ if (err){ console.log('error: ' + err.stack); return; } return console.log('connected established!'); }); } var server = http.createserver(function(request,response){ var parsed = url.parse(request.url); var mimetypelookup = mime.lookup(request.url); if(request.method == "post") { // post } else if (request.method == "get") { // if (request.url == '/get-servers/'){ connecttodb(); connection.query('select * servers', function(err,rows,fields) { if (err) { console.log(err); return } var data = []; for( = 0 ; < rows.length ; i++){ data.push(rows[i].name); data.push(rows[i].client); data.push(rows[i].type); data.push(rows[i].host); data.push(rows[i].ssh); data.push(rows[i].mysql); } response.writehead(200, {'content-type': 'text/html'}); response.end(json.stringify(data,fields)); }); } } }).listen(port, host); console.log('server running @ http://127.0.0.1:4114/'); index.html
<!doctype html> <head> <title>home | innovation one</title> <link type="text/css" rel="stylesheet" href="css/styles.css" /> </head> <body> <h1>dev sheet dashboard</h1> <button id="getservers">get servers</button> <table id="servers"> <thead> <tr> <th width="150">server name</th> <th width="150">client</th> <th width="150">type</th> <th width="150">host</th> <th width="150">ssh</th> <th width="150">mysql</th> </tr> </thead> <tbody> </tbody> </table> <div class="log"></div> <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> <script type="text/javascript"> $(document).ready(function() { // code here $('button#getservers').on('click',function(){ var jqxhr = $.get('/get-servers/', function(data,fields) { var serverdata = json.parse(data); console.log(serverdata); var rows = serverdata.length / (fields.length - 1); (i=0 ; < rows ; i++){ $('#servers tbody').append('<tr> <td>'+serverdata[i]+'</td><td>'+serverdata[i]+'</td> <td>'+serverdata[i]+'</td><td>'+serverdata[i]+'</td><td>'+serverdata[i]+'</td><td>'+serverdata[i]+'</td></tr>'); } }); }); }); </script> <script type="text/javascript" src="js/script.js" /> </body>
your rows data , array of objects:
[ { name:'super_company', client: 'super co ltd', type:'staging', host:'156.34.567.34', ssh:'gerbguiberug', mysql:'49thgrekver' }, { },... ] simply loop on array single object , extract it's properties in simple terms, or use for in loop or for each loop.
example:
for (i=0 ; < rows.length ; i++){ var row = rows[i]; console.log(row.name); console.log(row.client); console.log(row.type); console.log(row.host); console.log(row.ssh); console.log(row.mysql); } so, u need not push array accessing it. better pass directly , access below:
server.js:
connection.query('select * servers', function(err,rows,fields) { if (err) { console.log(err); return } response.writehead(200, {'content-type': 'text/html'}); response.end(json.stringify(rows)); }); index.html:
$.get('/get-servers/', function(data,fields) { var rows = json.parse(data); (i=0 ; < rows.length ; i++){ var row = rows[i]; $('#servers tbody').append('<tr><td>'+row.name+'</td><td>'+row.client+'</td><td>'+row.type+'</td><td>'+row.host+'</td><td>'+row.ssh+'</td><td>'+row.mysql+'</td></tr>'); } }); addition better if set content type json:
response.writehead(200, {'content-type': 'application/json'}); that way don't have parse in index.html (client side).
Comments
Post a Comment