Printing mysql data to EJS document with foreign keys

问题

Link to github project

I'm trying to get answers to quiz questions from mysql and print to a form using EJS templating in node/express application. I can't figure out how to print the correct answers to the corresponding question.

I would like the data to look like this in the browser:

Question 1 #id2

• answer 1 #id6
• answer 2 #id7
• answer 3 #id8

Question 2 #id3

• answer 1 #id9
• answer 2 #id10
• answer 3 #id11

The data is looking like this:

loadQuizes;
[ { quizId: 2,
    quizName: 'Bergskedjor',
    dateCreated: '2017-03-03T15:14:02.000Z',
    dateFinished: '2017-03-02T23:00:00.000Z',
    times: 2,
    score: 20 } ]

quizQuestions;
[ { questionId: 2,
    question: 'Vilket ├ñr v├ñrldens h├Âgsta berg?',
    questionQuizid: 2 },
  { questionId: 3,
    question: 'Vilket ├ñr v├ñrldens tredje h├Âgsta berg?',
    questionQuizid: 2 } ]

answers;
[ { answerId: 6,
    answer: 'Question 1 Answer 1',
    correct: 0,
    answerQuestionid: 2 },
  { answerId: 7,
    answer: 'Question 1 Answer 2',
    correct: 1,
    answerQuestionid: 2 },
  { answerId: 8,
    answer: 'Question 1 Answer 3',
    correct: 0,
    answerQuestionid: 2 },

  { answerId: 9,
    answer: 'Question 2 Answer 1',
    correct: 0,
    answerQuestionid: 3 },
  { answerId: 10,
    answer: 'Question 2 Answer 2',
    correct: 0,
    answerQuestionid: 3 },
  { answerId: 11,
    answer: 'Question 2 Answer 3',
    correct: 1,
    answerQuestionid: 3 } ]

Arriving from tables:

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 |
+--------+------------------------+---------------------+--------------+-------+-------+

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 |
+------------+-------------------------------------------+----------------+

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 |
+----------+---------------------+---------+------------------+

This is my solutions so far:

<h1>
        <% loadQuizes.forEach(function (quizes) { %>
            <h2><%= quizes.quizName %></h2>
        <% }) %>
    </h1>
    <form action="/takequiz" method="POST">
        <% quizQuestions.forEach(function (questions) { %>
            <div class="well well-sm">
                <h3><%= questions.question %></h3>
                    <% answers.forEach(function (ans) { %>
                    <%= ans.answer %><br>
                    <% }) %>
            </div> <!-- well -->
        <% }) %>
    </form>

But that gives me:

Question 1 #id2

 - answer 1 #id6
 - answer 2 #id7
 - answer 3 #id8
 - answer 1 #id9
 - answer 2 #id10 
 - answer 3 #id11

Question 2 #id3

 - answer 1 #id6
 - answer 2 #id7
 - answer 3 #id8
 - answer 1 #id9
 - answer 2 #id10 
 - answer 3 #id11

回答1:

As far as I can tell, you're selecting everything from the answers table that satisfy both questions:

SELECT * FROM answers WHERE answerQuestionid IN (SELECT questionId FROM question WHERE questionQuizid = ?);

You probably should try adding a condition in your view logic:

<% 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 -->
<% }) %>

来源：https://stackoverflow.com/questions/42610097/printing-mysql-data-to-ejs-document-with-foreign-keys