EJS从MySQL获取特定数据

时间:2017-03-04 13:45:59

标签: javascript jquery mysql ejs

Github project link

所以,我正在使用EJS作为模板引擎使用jQuery,Bootstrap和MySql创建一个Quiz创建应用程序。

我正在尝试根据测验循环出问题的相应答案。

所以,假设我通过路由呼叫启动quizd2测验。 我得到了2个问题的测验2。我在ejs代码中使用forEach()循环,但我无法弄清楚如何循环正确答案的正确答案?

<div class="content col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <h1>
        <% loadQuizes.forEach(function (quizes) { %>
            <h2><%= quizes.quizName %></h2> <!-- Load the name of quiz-->
        <% }) %>
    </h1>
    <form action="/takequiz" method="POST">
        <% quizQuestions.forEach(function (questions) { %> <!-- Load question by question WHERE questionQuizId = ? -->
            <div class="well well-sm">
                <h3><%= questions.question %></h3> <!-- Print question -->
                    <% answers.forEach(function (ans) { %><!-- Load answers by answers WHERE answerQuestionid = ? -->
                    <%= ans.answer %><br> <!-- Print answers followed by checkbox -->
                    <% }) %> <!-- End loading answers -->
            </div> <!-- well -->
        <% }) %> <!-- End loading question -->
    </form> <!-- form --> </div> <!-- content -->

我的表格看起来像这样:

mysql> SELECT * FROM quiz;
+--------+------------------------+---------------------+--------------+-------+-------+
| quizId | quizName               | dateCreated         | dateFinished | times | score |
+--------+------------------------+---------------------+--------------+-------+-------+
|      1 | Solution to everything | 2017-03-03 16:14:02 | 2017-03-03   |     2 |    20 |
|      2 | Bergskedjor            | 2017-03-03 16:14:02 | 2017-03-03   |     2 |    20 |
+--------+------------------------+---------------------+--------------+-------+-------+
2 rows in set (0.00 sec)

mysql> SELECT * FROM question;
+------------+-------------------------------------------+----------------+
| questionId | question                                  | questionQuizid |
+------------+-------------------------------------------+----------------+
|          1 | What color is the Sky?                    |              1 |
|          2 | Vilket ├ñr v├ñrldens h├Âgsta berg?        |              2 |
|          3 | Vilket ├ñr v├ñrldens tredje h├Âgsta berg? |              2 |
+------------+-------------------------------------------+----------------+
3 rows in set (0.00 sec)

mysql> SELECT * FROM answers;
+----------+---------------------+---------+------------------+
| answerId | answer              | correct | answerQuestionid |
+----------+---------------------+---------+------------------+
|        1 | Red                 |       0 |                1 |
|        2 | Green               |       0 |                1 |
|        3 | Blue                |       1 |                1 |
|        4 | Pink                |       0 |                1 |
|        5 | Red                 |       0 |                1 |
|        6 | Question 1 Answer 1 |       0 |                2 |
|        7 | Question 1 Answer 2 |       1 |                2 |
|        8 | Question 1 Answer 3 |       0 |                2 |
|        9 | Question 2 Answer 1 |       0 |                3 |
|       10 | Question 2 Answer 2 |       0 |                3 |
|       11 | Question 2 Answer 3 |       1 |                3 |
+----------+---------------------+---------+------------------+
11 rows in set (0.00 sec)

当然还有来自地狱的回调循环:)

    app.get('/takequiz/:id', function(req, res) {
        connection.acquire(function (err, con) {
            var quizId = req.params.id;
            con.query('SELECT * FROM quiz WHERE quizId = ?', quizId, function (err, qid) {
                if(err) {
                    console.log(err);
                } else {
                    con.query('SELECT * FROM question WHERE questionQuizId = ?', quizId, function (err, question) {
                        if (err) {
                            console.log(err);
                        } else {
                            con.query('SELECT * FROM answers WHERE answerQuestionid IN (SELECT questionId FROM question WHERE questionQuizid = ?)', quizId, function (err, answer) {
                                console.log(answer);
                                con.release();
                                if (err) {
                                    console.log(err);
                                } else {
                                    loadQuizes = JSON.parse(JSON.stringify(qid));
                                    quizQuestions = JSON.parse(JSON.stringify(question));
                                    answers = JSON.parse(JSON.stringify(answer));
                                    res.render('takequizbyid', {
                                        loadQuizes: loadQuizes,
                                        quizQuestions: quizQuestions,
                                        answers: answers,
                                        title: 'Take quiz',
                                        classname: 'takequizbyid'
                                    });
                                }
                            });
                        }
                    });
                }
            });
        }
);
});

结果如下: Result

1 个答案:

答案 0 :(得分:0)

找到一个更好问题的解决方案:solution

介绍逻辑:

<% quizQuestions.forEach(function (question) { %>
  <div class="well well-sm">
    <h3><%= question.question %></h3>
    <% answers.forEach(function (ans) { %>
      <% if (ans.answerQuestionid === question.questionId) { %>
        <%= ans.answer %><br>
      <% } %>
    <% }) %>
  </div> <!-- well -->
<% }) %>