Node.jsとexpressとpugでDBの中のデータを表に出力したいが、Cannot read property 'length' of undefinedとなる理由がわからない

Question

前提・実現したいこと

mysqlに格納してあるデータをNode.jsとexpressを使ってpugに渡して表示させたい。

発生している問題・エラーメッセージ

TypeError: C:sensor_management\admin\views\device_list.pug:19
    17|                     td Edit or DEL

    18| 

  > 19|                 each facility in d

    20|                     tr

    21|                     td.id #{facility.id}

    22|                     td.id #{facility.set_name}


Cannot read property 'length' of undefined
    at eval (eval at wrap (C:\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:67:32)
    at eval (eval at wrap (C:\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:190:4)
    at template (eval at wrap (C:\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:197:7)
    at Object.exports.renderFile (C:\node_modules\pug\lib\index.js:452:38)
    at Object.exports.renderFile (C:\node_modules\pug\lib\index.js:442:21)
    at View.exports.__express [as engine] (C:\node_modules\pug\lib\index.js:491:11)
    at View.render (C:\node_modules\express\lib\view.js:135:8)
    at tryRender (C:\node_modules\express\lib\application.js:640:10)
    at Function.render (C:\node_modules\express\lib\application.js:592:3)
    at ServerResponse.render (C:\node_modules\express\lib\response.js:1012:7)

該当のソースコード

html
    head
        title #{title}
        link(rel="stylesheet" href="/css/style.css")
    body
        h1 Device List
            table.facility_table
                tr.title
                    td Device ID
                    td Set Place Name
                    td Set Place Address
                    td Place Manager Name
                    td Place Manager Address
                    td Manager's Tell Number
                    td Manager's Mail Address
                    td Place Longitude Latitude
                    td Edit or DEL

                each facility in d
                    tr
                    td.id #{facility.id}
                    td.id #{facility.set_name}
                    td.id #{facility.set_address}
                    td.id #{facility.manager_name}
                    td.id #{facility.manager_address}
                    td.id #{facility.tel}
                    td.id #{facility.mail}
                    td.id #{facility.e_n}
                    td.id 
                        - var id = facility.id 
                        form(action="/device_edit" method="get")
                            input(type="hidden" name="id" value=`${id}`)
                            button(type="submit").btn.edit Edit
                        form(action="/del" method="post")
                            input(type="hidden" name="id" value=`${id}`)
                            button(type="submit").btn.del DEL

            a(href="/admin_menu") トップ

const express = require('express');
const url = require('url');
const app = express();// おまじない(expressを呼びやすくしてるだけ)
const bodyParser = require('body-parser');// HTMLのinputの値を引っ張れるようにするやつ
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// mySQLの認証情報
// ここには正しい値が入っています
const mysql = require('mysql');
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'table'
});

// テンプレートエンジンの定義
app.set('view engine', 'pug');
app.use(express.static('views'));

// モジュール化されたルーティング設定の呼び出し
const index = require('./routes/admin_server');

// インデックスページのルーティング
app.use('/', index);
app.use('/admin_login', index);
app.use('/admin_menu', index);
app.use('/device_list', index);
app.use('/patient_list', index);
app.use('/device_register', index);
app.use('/patient_register', index);

// テンプレートエンジンの定義
app.set('view engine', 'pug');
app.use(express.static('views'));

app.get('/device_list', isAuthenticated, function (req, res) {
    var sql = 'select * from facility.devices';
    fullUrl = req.protocol + '://' + req.get('Host') + req.originalUrl;
    connection.query(sql, (err, rows, fields) => {
        if (err) throw err;
        res.render('/device_list', {
            title: 'Devices List',
            d: rows
        });
    });
});

app.listen(port, () => {
    console.log('Start Admin Server 8080');
});

const express = require('express');
const router = express.Router();

// インデックスページのルーティング
router.get('/', (req, res) =>{
    res.render('admin_server');
});
router.get('/admin_login', (req, res) =>{
    res.render('admin_login');
});
router.get('/admin_menu', (req, res) => {
    res.render('admin_menu');
})
router.get('/device_list', (req, res) =>{
    res.render('device_list');
});
router.get('/patient_list', (req, res) => {
    res.render('patient_list');
})
router.get('/device_register', (req, res) => {
    res.render('device_register');
})
router.get('/patient_register', (req, res) => {
    res.render('patient_register');
})

module.exports = router;

試したこと

インデントの入れ替えや変数の書き換え、ルーティングのリンクの書き換えなども試しましたが効果なしでした。

res.render(/device_list)の直前でconsole.log(rows)を実行しましたが、そもそもここに至らず、同じエラーが吐かれてしまいました

当該のeach文のところをコメントアウトし実行したところ、ページが正しく遷移しました

html
    head
        title #{title}
        link(rel="stylesheet" href="/css/style.css")
    body
        h1 Device List
            table.facility_table
                tr.title
                    td Device ID
                    td Set Place Name
                    td Set Place Address
                    td Place Manager Name
                    td Place Manager Address
                    td Manager's Tell Number
                    td Manager's Mail Address
                    td Place Longitude Latitude
                    td Edit or DEL
                
                //- each device in d
                //-     tr
                //-     td.id #{device.id}
                //-     td.id #{device.set_name}
                //-     td.id #{device.set_address}
                //-     td.id #{device.manager_name}
                //-     td.id #{device.manager_address}
                //-     td.id #{device.tel}
                //-     td.id #{device.mail}
                //-     td.id #{device.e_n}
                //-     td.id 
                //-         - var id = device.id 
                //-         form(action="/device_edit" method="get")
                //-             input(type="hidden" name="id" value=`${id}`)
                //-             button(type="submit").btn.edit Edit
                //-         form(action="/del" method="post")
                //-             input(type="hidden" name="id" value=`${id}`)
                //-             button(type="submit").btn.del DEL

    a(href="/admin_menu") トップ

補足情報（FW/ツールのバージョンなど）

参考を見ましたが、railsではないのであまりわかりませんでした。

Comments

[A_kirisaki]

res.render 直前に console.log(rows) で中身が入ってるか確認しました？

[Kumampet]

ご指摘ありがとうございます。
行ってみましたが、undefinedとも何も表示されず、同様のエラーで止まってしまいます。

Answer 1

ルーティングのadmin_server.js内のgetで処理をすると治りました。

const express = require('express');
const router = express.Router();
// mySQLの認証情報
const mysql = require('mysql');
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'db'
});

router.get('/device_list', (req, res) =>{
    var sql = 'select * from facility.devices';
    fullUrl = req.protocol + '://' + req.get('Host') + req.originalUrl;
    connection.query(sql, (err, rows, fields) => {
        if (err) throw err;
        res.render('device_list', {
            title: 'Devices List',
            d: rows
        });
    });
    //res.render('device_list');
});

Answer 2

そもそも DB とつながっていなかったですね。先頭にでも追加してみてください。

const mysql = require('mysql');

const connection = mysql.createConnection({
	host : 'localhost', // この辺の設定は適宜合わせてください
	user : 'root',
	database: 'testdatabase'
});

Comments

[Kumampet]

回答ありがとうございます。

こちらで記載しておりませんでしたがＤＢへの認証情報はすでに書き込まれております。
こちらには正しい値が入っていますので、おそらくＤＢに接続していないというわけではなさそうでした。