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

Question

前提・実現したいこと

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

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

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

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

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

該当のソースコード

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

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

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

<tr>
 <th scope="col">ID</th>
 <th scope="col">名前</th>
 <th scope="col">メールアドレス</th>
 <th scope="col">表示1</th>
 <th scope="col">表示2</th>
 <th scope="col">表示3</th>
 <th scope="col">表示4</th>
</tr>
</thead>
<tbody>
  <% for(var i in content) { %>
  <tr>
   <% var obj = content[i]; %>
   <th><%= obj.id %></th>
   <th><%= obj.name %></th>
   <th><%= obj.email %></th>
   <th><%= obj.output1 %></th>
   <th><%= obj.output2 %></th>
   <th><%= obj.output3 %></th>
   <th><%= obj.output4 %></th>
  </tr>
  <% } %>

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

試したこと

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

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

###追記

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

  const sql = "select * from list";
  let result = await queryAsync(sql);
  console.log(result);
  res.render("index.ejs",{content: result});
});

Comments

[gano]

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

[t_tak]

app.getメソッドは先に書いてあるほうしか動かないのですね、勉強になります。

追記したような形で1つにまとめていたのですが、同じルーティング"/"を指定したい場合はどのように1つにまとめるのがよろしいのでしょうか。

Answer 1

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

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

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

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

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

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

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

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

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

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

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

Comments

[t_tak]

回答ありがとうございます。
すごく丁寧で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});
});

としたら、未定義のエラーは表示されなくなりました。ありがとうございます！

Answer 2

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

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

Comments

[t_tak]

回答ありがとうございます。
ご指摘の通りミスがありましたので、正しく修正させた頂きました。

こちらに転記する際に誤ってしまったようで、元のソースではuser_resultsでした。
ご指摘ありがとうございます。