Cannot read properties of undefined (reading 'progress')
解決したいこと
案件一覧から、個別ページ(project)に移動したときに、その案件の内容（現場名(title)、進捗(progress)など）を表示する機能を実装しています
aタグで囲った場合はエラーが出るものの表示はされます
spanタグの場合はエラー分が表示され、個別ページが表示されません
発生している問題・エラー
TypeError: /Users/ken/node/crm-system/views/project.ejs:18
16| <div>
17| <span>進捗</span>
>> 18| <a><%= project.progress %></a>
19| <span>現場名</span>
20| <a><%= project.title %></a>
21| <span>工事内容</span>
Cannot read properties of undefined (reading 'progress')
at eval ("/Users/ken/node/crm-system/views/project.ejs":15:34)
at project (/Users/ken/node/crm-system/node_modules/ejs/lib/ejs.js:703:17)
at tryHandleCache (/Users/ken/node/crm-system/node_modules/ejs/lib/ejs.js:274:36)
at exports.renderFile [as engine] (/Users/ken/node/crm-system/node_modules/ejs/lib/ejs.js:491:10)
at View.render (/Users/ken/node/crm-system/node_modules/express/lib/view.js:135:8)
at tryRender (/Users/ken/node/crm-system/node_modules/express/lib/application.js:657:10)
at Function.render (/Users/ken/node/crm-system/node_modules/express/lib/application.js:609:3)
at ServerResponse.render (/Users/ken/node/crm-system/node_modules/express/lib/response.js:1039:7)
at Query.<anonymous> (/Users/ken/node/crm-system/app.js:71:11)
at Query.<anonymous> (/Users/ken/node/crm-system/node_modules/mysql/lib/Connection.js:526:10)```
ソースコード
project.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CRM-SYSTEM</title>
<link rel ="stylesheet" href="/css/style.css">
<script src="send_url.js"></script>
</head>
<body>
<%- include('header'); %>
<div class="container">
<di class="container-header">
<h1></h1>
<a href="/edit" class="edit-button">編集</a>
</div>
<div>
<span>進捗</span>
<a><%= project.progress %></a>
<span>現場名</span>
<a><%= project.title %></a>
<span>工事内容</span>
<a><%= project.detail %></a>
<span>住所</span>
<a><%= project.address %></a>
</div>
</div>
</body>
</html>
app.ejs
const express = require('express');
const mysql = require('mysql');
const session = require('express-session');
const bcrypt = require('bcrypt');
const app = express();
app.use(express.static('public'));
app.use(express.urlencoded({ extended: false }));
const connection = mysql.createConnection({
// host: 'localhost',
host:'127.0.0.1',
user: 'root',
password: 'password',
database: 'crm_system'
});
app.get('/', (req, res) => {
res.render('top.ejs');
});
app.get('/index', (req, res) => {
connection.query(
'SELECT * FROM projects',
(error, results) => {
res.render('index.ejs', {projects: results});
}
);
});
app.get('/new',(req,res) =>{
res.render('new.ejs');
});
app.post('/create',(req,res) => {
console.log(req.body);
const title = req.body.title;
const detail = req.body.detail;
const address = req.body.address;
const progress = req.body.progress;
connection.query(
'INSERT INTO projects (title,detail,address,progress)VALUES(?, ?, ?, ?)',
[title,detail,address,progress],
(error,results) => {
res.redirect('/index');
}
);
});
app.get('/project/:id',(req,res) => {
const id = req.params.id;
connection.query(
'SELECT * FROM projects WHERE id = ?',
[id],
(error,results) => {
res.render('project.ejs',{ project: results[0] });
}
);
});
app.get('/edit/:id/',(req,res) =>{
res.render('edit.ejs');
});
app.listen(3000);
mysql> SELECT * FROM projects;
+----+-----------+-----------+--------------+-----------------------+
| id | title | progress | detail | address |
+----+-----------+-----------+--------------+-----------------------+
| 1 | 中村邸 | 施工前 | 内装工事 | 岐阜県中津川市 |
| 2 | 鈴木 | | | |
+----+-----------+-----------+--------------+-----------------------+
2 rows in set (0.00 sec)
自分で試したこと
1.console.log(progress)や(req.body.progress)で出力
=>undefined
2.クエリ内のWHERE id = ?を削除
=>変化なし
3.プロパティがない、というエラーなので変数を再定義してみる
=>変化なし
4.aタグに変更
=>表示はされるがコンソール上にエラーが発生
aタグの場合に限りデータの受け渡しがされていますが、console.logがundefinedで
エラーがpropertiesがundefinedということは、connection.query内の参照方法が
違っているのでしょうか？
0
