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

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

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

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

Node.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Express

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

Q&A

解決済

2回答

2450閲覧

MySQL+JavaScriptでドロップダウンリストに反映させる

t_tak

総合スコア6

MySQL

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

Node.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Express

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

0グッド

0クリップ

投稿2020/05/21 10:01

編集2020/05/21 15:04

前提・実現したいこと

MySQL+Node.js+Expressの練習として簡単なフォームを作成しております。

複数の名前とメールアドレスがINSERTされたテーブルをMySQLに作成しており、その情報をフォームのドロップダウンリストに反映させたいと思っております。

ただ、すでに同ページに他の情報が入ったテーブルからリストを作成しており、そちらは正常通り反映されています。

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

ローカルでブラウザに表示しているが、contentが未定義エラーになる。

該当のソースコード

ejs

1 <select input name="input_name"> 2 <span>名前</span> 3 <% for(var j in userdata) {%> 4 <% var usr_obj = userdata[j]; %> 5 <option value="userdata"><%= usr_obj.name %></option> 6 <% } %> 7 </select>

javascript

1 2app.get("/", async (req, res) => { 3 const usr_sql = "select * from user"; 4 let results = await queryAsync(usr_sql); 5 console.log(user_results); 6 res.render("index.ejs",{userdata: user_results}); 7});

参考までに、こちらは期待通り表示されています。

ejs

1<tr> 2 <th scope="col">ID</th> 3 <th scope="col">名前</th> 4 <th scope="col">メールアドレス</th> 5 <th scope="col">表示1</th> 6 <th scope="col">表示2</th> 7 <th scope="col">表示3</th> 8 <th scope="col">表示4</th> 9</tr> 10</thead> 11<tbody> 12 <% for(var i in content) { %> 13 <tr> 14 <% var obj = content[i]; %> 15 <th><%= obj.id %></th> 16 <th><%= obj.name %></th> 17 <th><%= obj.email %></th> 18 <th><%= obj.output1 %></th> 19 <th><%= obj.output2 %></th> 20 <th><%= obj.output3 %></th> 21 <th><%= obj.output4 %></th> 22 </tr> 23 <% } %>

javascript

1app.get("/", async (req, res) => { 2 const sql = "select * from list"; 3 let results = await queryAsync(sql); 4 console.log(result); 5 res.render("index.ejs",{content: result}); 6});

試したこと

リストと同様にすれば表示されると考えたのですが、app.getメソッドを後に書いた方が未定義となってしまいます。
app.getメソッドが2つあるのが悪いと思い、1つのapp.getメソッド内に記述したりしたのですが上手くいきませんでした。

解決策があれば教えて頂けると嬉しいです、よろしくお願い致します。

###追記

javascript

1 2app.get("/", async (req, res) => { 3 const usr_sql = "select * from user"; 4 let user_results = await queryAsync(usr_sql); 5 console.log(user_results); 6 res.render("index.ejs",{userdata: user_results}); 7 8 const sql = "select * from list"; 9 let result = await queryAsync(sql); 10 console.log(result); 11 res.render("index.ejs",{content: result}); 12});

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

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

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

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

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

gano

2020/05/21 11:31 編集

app.getメソッドは2つおいて、 さらに第一引数にどちらも同じ'/'を指定していると、片方(先に書いてある方)しか動きません。 1つのapp.getメソッドで記述した方を記載いただけますでしょうか?
t_tak

2020/05/21 15:08

app.getメソッドは先に書いてあるほうしか動かないのですね、勉強になります。 追記したような形で1つにまとめていたのですが、同じルーティング"/"を指定したい場合はどのように1つにまとめるのがよろしいのでしょうか。
guest

回答2

0

ベストアンサー

補足頂いたので状況理解できました。

まずreqとresの意味を理解しましょう。それぞれrequestとresponseですね。
クライアントからのrequest(要求)に対して、サーバーがresponse(返答)します。
通常、要求1つに対して返答は1つという決まりになってます。

次はres.renderです。
res.render('index.ejs')は index.ejsをhtmlにしてクライアントに返す という関数ですね。
返すというのは、返答するというわけです。

ブラウザからアクセスした際にリクエストを送っていますが、1回目のres.renderでその要求に対する返答をもらってるので、満足していて、2回目の返答は受け取りません。

ですので、クライアントは1回目のres.renderの結果を受け取りますから、
user_resultsは変換されますが、contentの情報は何も得ていないのでundefinedになります。

では、複数の値をejs上で変換するにはどうすれば良いでしょうか?

javascriptの連想配列の考え方を思い出してください。

userdata は user_results に対応してほしい。
content は result に対応してほしい。

これを連想配列で表現すれば良いでしょう。

js

1res.render('index.ejs', { userdata: user_results, content: result });

としたらどうでしょうか?

投稿2020/05/21 16:13

編集2020/05/21 16:14
gano

総合スコア39

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

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

t_tak

2020/05/22 02:44 編集

回答ありがとうございます。 すごく丁寧でjavascript勉強中の私にでも分かるように説明してくださって、助かります。 たしかに、 app.get("/", async (req, res) => { const usr_sql = "select * from user"; let user_results = await queryAsync(usr_sql); const sql = "select * from list"; let result = await queryAsync(sql); res.render("index.ejs",{userdata: user_results,content: result}); }); としたら、未定義のエラーは表示されなくなりました。ありがとうございます!
guest

0

JavaScript

1 let results = await queryAsync(usr_sql); 2 console.log(user_results); 3 res.render("index.ejs",{userdata: user_results});

この部分ですが、resultsでDBから受け取って、user_resultsという、未定義の変数で、userdataに渡しています。

投稿2020/05/21 11:31

YT0014

総合スコア1750

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

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

t_tak

2020/05/21 15:07

回答ありがとうございます。 ご指摘の通りミスがありましたので、正しく修正させた頂きました。 こちらに転記する際に誤ってしまったようで、元のソースではuser_resultsでした。 ご指摘ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問