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

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

新規登録して質問してみよう
ただいま回答率
85.44%
Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

解決済

2回答

3314閲覧

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

Kumampet

総合スコア5

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

0クリップ

投稿2021/01/15 21:38

編集2021/01/16 05:17

前提・実現したいこと

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)

該当のソースコード

pug

1html 2 head 3 title #{title} 4 link(rel="stylesheet" href="/css/style.css") 5 body 6 h1 Device List 7 table.facility_table 8 tr.title 9 td Device ID 10 td Set Place Name 11 td Set Place Address 12 td Place Manager Name 13 td Place Manager Address 14 td Manager's Tell Number 15 td Manager's Mail Address 16 td Place Longitude Latitude 17 td Edit or DEL 18 19 each facility in d 20 tr 21 td.id #{facility.id} 22 td.id #{facility.set_name} 23 td.id #{facility.set_address} 24 td.id #{facility.manager_name} 25 td.id #{facility.manager_address} 26 td.id #{facility.tel} 27 td.id #{facility.mail} 28 td.id #{facility.e_n} 29 td.id 30 - var id = facility.id 31 form(action="/device_edit" method="get") 32 input(type="hidden" name="id" value=`${id}`) 33 button(type="submit").btn.edit Edit 34 form(action="/del" method="post") 35 input(type="hidden" name="id" value=`${id}`) 36 button(type="submit").btn.del DEL 37 38 a(href="/admin_menu") トップ

app.js

1const express = require('express'); 2const url = require('url'); 3const app = express();// おまじない(expressを呼びやすくしてるだけ) 4const bodyParser = require('body-parser');// HTMLのinputの値を引っ張れるようにするやつ 5app.use(bodyParser.urlencoded({ extended: true })); 6app.use(bodyParser.json()); 7 8// mySQLの認証情報 9// ここには正しい値が入っています 10const mysql = require('mysql'); 11const connection = mysql.createConnection({ 12 host: 'localhost', 13 user: 'root', 14 password: 'password', 15 database: 'table' 16}); 17 18// テンプレートエンジンの定義 19app.set('view engine', 'pug'); 20app.use(express.static('views')); 21 22// モジュール化されたルーティング設定の呼び出し 23const index = require('./routes/admin_server'); 24 25// インデックスページのルーティング 26app.use('/', index); 27app.use('/admin_login', index); 28app.use('/admin_menu', index); 29app.use('/device_list', index); 30app.use('/patient_list', index); 31app.use('/device_register', index); 32app.use('/patient_register', index); 33 34// テンプレートエンジンの定義 35app.set('view engine', 'pug'); 36app.use(express.static('views')); 37 38app.get('/device_list', isAuthenticated, function (req, res) { 39 var sql = 'select * from facility.devices'; 40 fullUrl = req.protocol + '://' + req.get('Host') + req.originalUrl; 41 connection.query(sql, (err, rows, fields) => { 42 if (err) throw err; 43 res.render('/device_list', { 44 title: 'Devices List', 45 d: rows 46 }); 47 }); 48}); 49 50app.listen(port, () => { 51 console.log('Start Admin Server 8080'); 52}); 53
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文のところをコメントアウトし実行したところ、ページが正しく遷移しました

pug

1html 2 head 3 title #{title} 4 link(rel="stylesheet" href="/css/style.css") 5 body 6 h1 Device List 7 table.facility_table 8 tr.title 9 td Device ID 10 td Set Place Name 11 td Set Place Address 12 td Place Manager Name 13 td Place Manager Address 14 td Manager's Tell Number 15 td Manager's Mail Address 16 td Place Longitude Latitude 17 td Edit or DEL 18 19 //- each device in d 20 //- tr 21 //- td.id #{device.id} 22 //- td.id #{device.set_name} 23 //- td.id #{device.set_address} 24 //- td.id #{device.manager_name} 25 //- td.id #{device.manager_address} 26 //- td.id #{device.tel} 27 //- td.id #{device.mail} 28 //- td.id #{device.e_n} 29 //- td.id 30 //- - var id = device.id 31 //- form(action="/device_edit" method="get") 32 //- input(type="hidden" name="id" value=`${id}`) 33 //- button(type="submit").btn.edit Edit 34 //- form(action="/del" method="post") 35 //- input(type="hidden" name="id" value=`${id}`) 36 //- button(type="submit").btn.del DEL 37 38 a(href="/admin_menu") トップ

イメージ説明

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

A_kirisaki

2021/01/16 02:12

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

2021/01/16 05:05

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

回答2

0

自己解決

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

js

1const express = require('express'); 2const router = express.Router(); 3// mySQLの認証情報 4const mysql = require('mysql'); 5const connection = mysql.createConnection({ 6 host: 'localhost', 7 user: 'root', 8 password: 'password', 9 database: 'db' 10}); 11 12router.get('/device_list', (req, res) =>{ 13 var sql = 'select * from facility.devices'; 14 fullUrl = req.protocol + '://' + req.get('Host') + req.originalUrl; 15 connection.query(sql, (err, rows, fields) => { 16 if (err) throw err; 17 res.render('device_list', { 18 title: 'Devices List', 19 d: rows 20 }); 21 }); 22 //res.render('device_list'); 23});

投稿2021/01/16 05:38

Kumampet

総合スコア5

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

JavaScript

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

投稿2021/01/16 05:11

A_kirisaki

総合スコア2853

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Kumampet

2021/01/16 05:18

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問