Electronでのmysqlとの接続

Electronでデスクトップアプリケーション作りをしています。
レンダラープロセスで画面上のボタンをクリックすることによって
Mysqlに接続し、クエリを発行して習得したデータをページ上に表示させたいです。
javascript,htmlともにほとんど知識がありません。
１から自分で勉強する時間がないため、同様のことを実装しようとしている、ネット上にあるコードをコピーして、なんとか理解を進めている状態です。

http://ourcodeworld.com/articles/read/259/how-to-connect-to-a-mysql-database-in-electron-framework

こちらのページに公開されているものを元に、
接続情報を修正し、自身のデータベースにも合うようにクエリ等を修正しています。
結果、サンプルですとレンダラープロセス上に結果が表形式で表示されていますが、
実装した自分のアプリケーションはデータがundefinedで表示されてしまいます。

データベースときちんと接続はできており、コンソールの方には
取得したデータが返されています。
javascriptとhtmlの間で変数をうまく渡せていないのでしょうか？
解決策を教えてください。

###該当のソースコード

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="UTF-8">
5        <title>Hello World!</title>
6    </head>
7    <body>
8        <h1>Connecting to MySQL</h1>
9        <br>
10        <input type="button" id="action-btn" value="Retrieve 10 first rows in the database" />
11        <table id="table" border="1">
12            <tbody>
13                
14            </tbody>
15        </table>
16    </body>
17    <script>
18        var mysql = require('mysql');
19
20        function el(selector) {
21            return document.getElementById(selector);
22        }
23
24        el('action-btn').addEventListener('click', function(){
25            // Get the mysql service
26            getFirstTenRows(function(rows){
27                var html = '';
28
29                rows.forEach(function(row){
30                    html += '<tr>';
31                    html += '<td>';
32                    html += row.id;
33                    html += '</td>';
34                    html += '<td>';
35                    html += row.name;
36                    html += '</td>';
37                    html += '</tr>';
38                    console.log(row);
39                });
40
41                document.querySelector('#table > tbody').innerHTML = html;
42            });
43        },false);
44
45        function getFirstTenRows(callback){
46            var mysql = require('mysql');
47
48            // Add the credentials to access your database
49            var connection = mysql.createConnection({
50                host     : 'localhost',
51                user     : 'root',
52                password : 'hoge',
53                database : 'Sample'
54            });
55
56            // connect to mysql
57            connection.connect(function(err) {
58                // in case of error
59                if(err){
60                    console.log(err.code);
61                    console.log(err.fatal);
62                }
63            });
64
65            // Perform a query
66            $query = 'SELECT UserNO, message FROM `electronSample`';
67
68            connection.query($query, function(err, rows, fields) {
69                if(err){
70                    console.log("An error ocurred performing the query.");
71                    console.log(err);
72                    return;
73                }
74
75                callback(rows);
76
77                console.log("Query succesfully executed");
78                console.log(rows);
79            });
80
81            // Close the connection
82            connection.end(function(){
83                // The connection has been closed
84            });
85        }
86    </script>
87</html>

行動規範の内容に同意します

回答1件

自己解決

修正箇所が不足していたようです。

html
1html += '<tr>';
2html += '<td>';
3html += row.id;
4html += '</td>';
5html += '<td>';
6html += row.name;
7html += '</td>';
8html += '</tr>';

html上で表をつくっていた変数名? row.id, row.name を自分のデータベースを同じにすることで表示することができました。

投稿2017/02/24 16:52

seventhencore

総合スコア22

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Electronでのmysqlとの接続

関連した質問