質問編集履歴
5
書式の改善
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -181,7 +181,7 @@
|
|
|
181
181
|
|
|
182
182
|
他に、data.rowsを変数に代入してからEJSファイルに渡したりもしたのですが、特に関係はなかったようです。
|
|
183
183
|
|
|
184
|
-
### 追記（2023/12/07
|
|
184
|
+
### 追記（2023/12/07）
|
|
185
185
|
/edit:idのページの取得時にエラーが出る問題については、取得したテーブルデータを第二引数に指定する際のクエリ記法がMySQLとPostgresで異なっていることが原因でした。
|
|
186
186
|
/edit:id以外のルーティングでも使用していた記法ですので、全て以下のように修正することで問題なくデータを取得できるようになりました。
|
|
187
187
|
|
4
書式の改善
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -181,7 +181,7 @@
|
|
|
181
181
|
|
|
182
182
|
他に、data.rowsを変数に代入してからEJSファイルに渡したりもしたのですが、特に関係はなかったようです。
|
|
183
183
|
|
|
184
|
-
### 追記
|
|
184
|
+
### 追記（2023/12/07)
|
|
185
185
|
/edit:idのページの取得時にエラーが出る問題については、取得したテーブルデータを第二引数に指定する際のクエリ記法がMySQLとPostgresで異なっていることが原因でした。
|
|
186
186
|
/edit:id以外のルーティングでも使用していた記法ですので、全て以下のように修正することで問題なくデータを取得できるようになりました。
|
|
187
187
|
|
3
書式の改善
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -181,21 +181,9 @@
|
|
|
181
181
|
|
|
182
182
|
他に、data.rowsを変数に代入してからEJSファイルに渡したりもしたのですが、特に関係はなかったようです。
|
|
183
183
|
|
|
184
|
-
### 補足情報（FW/ツールのバージョンなど）
|
|
185
|
-
実行環境はWindows11です。
|
|
186
|
-
|
|
187
|
-
Node: v16.14.2
|
|
188
|
-
MySQL: v8.0.3
|
|
189
|
-
PostgreSQL: v16.1
|
|
190
|
-
|
|
191
|
-
他にご入用の情報があれば仰ってくださいませ。
|
|
192
|
-
知識が浅くて恐縮ですが、どうぞよろしくお願いいたします。
|
|
193
|
-
|
|
194
184
|
### 追記
|
|
195
185
|
/edit:idのページの取得時にエラーが出る問題については、取得したテーブルデータを第二引数に指定する際のクエリ記法がMySQLとPostgresで異なっていることが原因でした。
|
|
196
186
|
/edit:id以外のルーティングでも使用していた記法ですので、全て以下のように修正することで問題なくデータを取得できるようになりました。
|
|
197
|
-
|
|
198
|
-
また、文字数の上限に達したため、今回の問題とは関係がなかったviewsファイルの情報を削除しました。
|
|
199
187
|
|
|
200
188
|
```app.js（以下は/edit/:idのルーティングの例）
|
|
201
189
|
// MySQLの記法
|
|
@@ -223,3 +211,16 @@
|
|
|
223
211
|
|
|
224
212
|
参照したページは以下です。
|
|
225
213
|
https://qiita.com/sa9ra4ma/items/765660dfd6936aeaff1b
|
|
214
|
+
|
|
215
|
+
また、文字数の上限に達したため、今回の問題とは関係がなかったviewsファイルの情報を削除しました。
|
|
216
|
+
|
|
217
|
+
|
|
218
|
+
### 補足情報（FW/ツールのバージョンなど）
|
|
219
|
+
実行環境はWindows11です。
|
|
220
|
+
|
|
221
|
+
Node: v16.14.2
|
|
222
|
+
MySQL: v8.0.3
|
|
223
|
+
PostgreSQL: v16.1
|
|
224
|
+
|
|
225
|
+
他にご入用の情報があれば仰ってくださいませ。
|
|
226
|
+
知識が浅くて恐縮ですが、どうぞよろしくお願いいたします。
|
2
情報の追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -169,118 +169,6 @@
|
|
|
169
169
|
}
|
|
170
170
|
```
|
|
171
171
|
|
|
172
|
-
以下はviewファイルの情報です。
|
|
173
|
-
index.ejs（メモ一覧の取得）とtrash.ejs（ゴミ箱に移動させたメモ一覧の取得）は構造が同じです。
|
|
174
|
-
また、edit.ejs（既存メモの編集）も、memosテーブルから情報を取得している部分以外はnew.ejs（新規メモの作成）と同じ作りになっております。
|
|
175
|
-
|
|
176
|
-
```index.ejs（trash.ejsと構造が同じ）
|
|
177
|
-
<!DOCTYPE html>
|
|
178
|
-
<html lang="en">
|
|
179
|
-
<head>
|
|
180
|
-
<meta charset="UTF-8">
|
|
181
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
182
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
183
|
-
<title>Kanon's Memo</title>
|
|
184
|
-
<link rel="icon" href="/images/black-cat.png">
|
|
185
|
-
<link rel="stylesheet" href="/css/style.css">
|
|
186
|
-
</head>
|
|
187
|
-
<body>
|
|
188
|
-
<%- include('header'); %>
|
|
189
|
-
<main>
|
|
190
|
-
<div class="index-container">
|
|
191
|
-
<div class="container-header">
|
|
192
|
-
<div class="container-title">
|
|
193
|
-
<h1>Memo List</h1>
|
|
194
|
-
<img src="/images/black-cat.png" alt="S-cat" class="cat-image">
|
|
195
|
-
</div>
|
|
196
|
-
<div class="button">
|
|
197
|
-
<a href="/trash"class="optional-button move-button">Trash</a>
|
|
198
|
-
<a href="/new" class="optional-button">+ New</a>
|
|
199
|
-
</div>
|
|
200
|
-
</div>
|
|
201
|
-
<div class="index-table-wrapper">
|
|
202
|
-
<div class="table-head">
|
|
203
|
-
<span class="title-column">Name</span>
|
|
204
|
-
<span class="modified-column">Last Modified</span>
|
|
205
|
-
</div>
|
|
206
|
-
<ul class="table-body">
|
|
207
|
-
<% memos.forEach((memo) => { %>
|
|
208
|
-
<li>
|
|
209
|
-
<span class="title-column"><%= memo.title %></span>
|
|
210
|
-
<div class="items">
|
|
211
|
-
<span class="modified-column"><%= memo.modified %></span>
|
|
212
|
-
<div class="icon-area">
|
|
213
|
-
<div class="menu-icon">
|
|
214
|
-
<div></div>
|
|
215
|
-
<div></div>
|
|
216
|
-
<div></div>
|
|
217
|
-
</div>
|
|
218
|
-
<ul class="menu-content">
|
|
219
|
-
<li><a href="/edit/<%= memo.id %>">Edit</a></li>
|
|
220
|
-
<li><form action="/remove/<%= memo.id %>" method="post">
|
|
221
|
-
<input type="submit" value="Remove">
|
|
222
|
-
</form></li>
|
|
223
|
-
</ul>
|
|
224
|
-
</div>
|
|
225
|
-
</div>
|
|
226
|
-
</li>
|
|
227
|
-
<% }); %>
|
|
228
|
-
</ul>
|
|
229
|
-
</div>
|
|
230
|
-
</div>
|
|
231
|
-
<div class="footer">
|
|
232
|
-
<small class="copy-right">© 2023 kanon</small>
|
|
233
|
-
</div>
|
|
234
|
-
</main>
|
|
235
|
-
</body>
|
|
236
|
-
</html>
|
|
237
|
-
```
|
|
238
|
-
|
|
239
|
-
```edit.ejs（memosのデータを渡している部分以外はnew.ejsと構造が同じ）
|
|
240
|
-
<!DOCTYPE html>
|
|
241
|
-
<html lang="en">
|
|
242
|
-
<head>
|
|
243
|
-
<meta charset="UTF-8">
|
|
244
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
245
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
246
|
-
<title>Kanon's Memo</title>
|
|
247
|
-
<link rel="icon" href="/images/black-cat.png">
|
|
248
|
-
<link rel="stylesheet" href="/css/style.css">
|
|
249
|
-
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
|
|
250
|
-
</head>
|
|
251
|
-
<body>
|
|
252
|
-
<%- include('header'); %>
|
|
253
|
-
<main>
|
|
254
|
-
<div class="new-container">
|
|
255
|
-
<form action="/update/<%=memo.id%>" method="post" class="submit">
|
|
256
|
-
<div class="memo-wrapper">
|
|
257
|
-
<input value="<%= memo.title %>" class="title-area input" name="memoTitle" type="text" placeholder="Title">
|
|
258
|
-
<input type="text" name="dummy" style="display: none;">
|
|
259
|
-
<textarea class="content-area input" name="memoContent" placeholder="Text"><%= memo.content %></textarea>
|
|
260
|
-
</div>
|
|
261
|
-
<div class="menu-wrapper">
|
|
262
|
-
<input type="button" onclick="submit();" class="save-button" value="Save">
|
|
263
|
-
<a href="/index" class="cancel-button">Cancel</a>
|
|
264
|
-
</div>
|
|
265
|
-
</form>
|
|
266
|
-
</div>
|
|
267
|
-
</main>
|
|
268
|
-
<script>
|
|
269
|
-
$(function($) {
|
|
270
|
-
$('.input').keydown(function(e) {
|
|
271
|
-
if(event.ctrlKey) {
|
|
272
|
-
$('.submit').submit();
|
|
273
|
-
return false;
|
|
274
|
-
if (e.keyCode === 13 && $(this).val()) {
|
|
275
|
-
}
|
|
276
|
-
}
|
|
277
|
-
});
|
|
278
|
-
});
|
|
279
|
-
</script>
|
|
280
|
-
</body>
|
|
281
|
-
</html>
|
|
282
|
-
```
|
|
283
|
-
|
|
284
172
|
### 試したこと
|
|
285
173
|
エラー文を検索したところ、'TypeError: Cannot read properties of undefined (reading 'hoge')'というエラーはその値がundefinedの時に起こるという情報が見つかりました。
|
|
286
174
|
しかし、rows配列は存在しており、実際に一度目のアクセスでは取得が可能なため、解決に紐付けることはできませんでした。
|
|
@@ -302,3 +190,36 @@
|
|
|
302
190
|
|
|
303
191
|
他にご入用の情報があれば仰ってくださいませ。
|
|
304
192
|
知識が浅くて恐縮ですが、どうぞよろしくお願いいたします。
|
|
193
|
+
|
|
194
|
+
### 追記
|
|
195
|
+
/edit:idのページの取得時にエラーが出る問題については、取得したテーブルデータを第二引数に指定する際のクエリ記法がMySQLとPostgresで異なっていることが原因でした。
|
|
196
|
+
/edit:id以外のルーティングでも使用していた記法ですので、全て以下のように修正することで問題なくデータを取得できるようになりました。
|
|
197
|
+
|
|
198
|
+
また、文字数の上限に達したため、今回の問題とは関係がなかったviewsファイルの情報を削除しました。
|
|
199
|
+
|
|
200
|
+
```app.js（以下は/edit/:idのルーティングの例）
|
|
201
|
+
// MySQLの記法
|
|
202
|
+
app.get('/edit/:id', (req, res) => {
|
|
203
|
+
pool.query(
|
|
204
|
+
'SELECT * FROM memos WHERE id = $1', // '?'という書き方はPostgreSQLに対応していない
|
|
205
|
+
[req.params.id],
|
|
206
|
+
(error, results) => {
|
|
207
|
+
res.render('edit.ejs', {memo: results.rows[0]});
|
|
208
|
+
}
|
|
209
|
+
);
|
|
210
|
+
});
|
|
211
|
+
|
|
212
|
+
// PostgreSQLの記法
|
|
213
|
+
app.get('/edit/:id', (req, res) => {
|
|
214
|
+
pool.query(
|
|
215
|
+
'SELECT * FROM memos WHERE id = $1', // '?'の部分をPostgreSQLの記法に合わせ'$1'という書き方に変更
|
|
216
|
+
[req.params.id],
|
|
217
|
+
(error, results) => {
|
|
218
|
+
res.render('edit.ejs', {memo: results.rows[0]});
|
|
219
|
+
}
|
|
220
|
+
);
|
|
221
|
+
});
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
参照したページは以下です。
|
|
225
|
+
https://qiita.com/sa9ra4ma/items/765660dfd6936aeaff1b
|
1
書式の改善
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
先日投稿いたしました投稿（ https://teratail.com/questions/6zqnuiwft1zlkp ）の続きで、実行時に起こるエラーが変わりましたので、このたび質問を投稿し直すこととなりました。
|
|
8
8
|
見ていただかなくても今回の質問に差し障りはないと思いますが、以前発生していたエラーをご覧いただく際は、お手数ですが上記のページをご参照いただけますと幸いです。
|
|
9
9
|
|
|
10
|
-
メモアプリのルーティングについて簡単に説明しますと、/indexでメモの一覧情報を取得し/trashでゴミ箱に入れたメモの一覧ページを取得、また/newで新規メモの作成、/edit/:idで任意のメモの編集が行え
|
|
10
|
+
メモアプリのルーティングについて簡単に説明しますと、/indexでメモの一覧情報を取得し/trashでゴミ箱に入れたメモの一覧ページを取得、また/newで新規メモの作成、/edit/:idで任意のメモの編集が行えるという感じです。
|
|
11
11
|
|
|
12
12
|
### 発生している問題
|
|
13
13
|
app.jsにて、PostgreSQLのテーブルデータをdata.rowsという形でEJSファイルに渡しているのですが、実際にアプリを実行すると次のような流れでエラーが発生します。
|