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

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

新規登録して質問してみよう
ただいま回答率
86.02%
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

解決済

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

Kumampet
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アプリケーションを提供します。

2回答

0グッド

0クリップ

2225閲覧

投稿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ではないのであまりわかりませんでした。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

A_kirisaki

2021/01/16 02:12

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

2021/01/16 05:05

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

回答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に接続していないというわけではなさそうでした。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

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アプリケーションを提供します。