JS＆NodeJs：AJAXでDBからテーブルを読み込み、テーブルに表示

私はNodeJSでプロジェクトに取り掛かりました。MySQLデータベースからAJAXを読み込み、HTMLテーブルにDBテーブルの行を表示しようとしています。JS＆NodeJs：AJAXでDBからテーブルを読み込み、テーブルに表示

私はDBからデータを取得した後にデータを処理/保存する方法に問題があると思います。ここで

は、これまでのところ（もちろん完全に架空のデータ）私のDBの構造であり、そして私のコード：

ここも

は、私は（serverData）をCONSOLE.LOG場合、私が得るものです。私のデータは、何らかのネストされた配列や、私がアクセスしている配列のどの値を識別できるような構造でなければならないかのようです。

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") { 
// GET 
if (request.url == '/get-servers/'){ 
    connectToDb(); 
    connection.query('SELECT * FROM servers', function(err,rows,fields) { 
    if (err) { 
     console.log(err); 
     return 
    } 
    var data = []; 
    for(i = 0 ; i < 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 at 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); 

      for (i=0 ; i < 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>

出典

2016-10-26 daniel blythe

あなたの行データは、実際とオブジェクトの配列です：

[ 
    { 
     name:'super_company', 
     client: 'Super Co Ltd', 
     type:'staging', 
     host:'156.34.567.34', 
     ssh:'gerbguiberug', 
     mysql:'49thgrekver' 
    }, 
    { 

    },... 
]

単純に配列をループして単一のオブジェクトを取得し、単純な用語でそのプロパティを抽出するか、for inループまたはfor eachループを使用します。

例：

for (i=0 ; i < 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); 
}

ので、uがそれにアクセスするための配列にそれをプッシュする必要はありません。

server.js： より良いパスを直接し、以下のようにアクセスされ

connection.query('SELECT * FROM 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); 
    for (i=0 ; i < 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>'); 
    } 
});

追加それがあれば良いでしょう コンテンツタイプをJSONに設定します：

response.writeHead(200, {'Content-Type': 'application/json'});

このようにして、index.html（クライアント側）で解析する必要はありません。

出典

2016-10-26 10:30:00 Nivesh

こんにちはNivesh、ご返信ありがとうございます。私は次の数時間であなたの返信をテストし、それがどのようになっているかを知らせます。しかし、あなたの返信は有望に見えます：）。 –

こんにちはNivesh、すべての作業偉大なthats、ありがとう！ "Content-Type"を "application/json"に設定したときだけです。この応答はコンソール "JSONの位置1での予期しないトークン"で取得されます。あなたはそれをどう修正するか知っていますか？あなたの答えをもう一度おねがいします。私はあなたが何をしたのかを理解する必要があることを知っています。実際に "index.htmlファイル"に "var row = rows [i];' "という行があるのはなぜですか？ありがとう。 –

あなたは 'var obj = array_obj [0]'を実行する必要がある特定のオブジェクトにアクセスするために、配列の中にオブジェクトのリストを持っています。これは0番目のインデックスオブジェクトにアクセスし、 'obj.prop_name' – Nivesh

JS＆NodeJs：AJAXでDBからテーブルを読み込み、テーブルに表示

答えて

関連する問題