我怎样才能将所有问题连同自己的选择一起显示在我看来？

Question

我有这个响应数组。

[

   {

      "id":16,

      "question":"Who is this message for?",

      "duration":60,

      "choices":[

         {

            "id":61,

            "question_id":16,

            "choice":"guests"

         },

         {

            "id":62,

            "question_id":16,

            "choice":"Eskaya"

         },

         {

            "id":63,

            "question_id":16,

            "choice":"local artists"

         },

         {

            "id":64,

            "question_id":16,

            "choice":"conference attendees"

         }

      ]

   },

   {

      "id":17,

      "question":"What is displayed in the lobby? ",

      "duration":60,

      "choices":[

         {

            "id":65,

            "question_id":17,

            "choice":"plush furniture"

         },

         {

            "id":66,

            "question_id":17,

            "choice":"the 24-hour restaurant"

         },

         {

            "id":67,

            "question_id":17,

            "choice":"the main conference rooms"

         },

         {

            "id":68,

            "question_id":17,

            "choice":"art from various local artists "

         }

      ]

   },

   {

      "id":18,

      "question":"What type of establishment is Eskaya?",

      "duration":60,

      "choices":[

         {

            "id":69,

            "question_id":18,

            "choice":"a hotel"

         },

         {

            "id":70,

            "question_id":18,

            "choice":"a pool area"

         },

         {

            "id":71,

            "question_id":18,

            "choice":"a restaurant"

         },

         {

            "id":72,

            "question_id":18,

            "choice":"a conference center"

         }

      ]

   }

]

我想将它显示在我的视图上，如下所示：

1.Who is this message for?

  guests

  Eskaya

  local artists

  conference attendees

2.What is displayed in the lobby? 

  plush furniture

  the 24-hour restaurant

  the main conference rooms

  art from various local artists

类似的事情。

Answer 1

在当前的代码中，您附加htmls了两个不同的变量，这就是结果单独出现的原因。相反，您可以附加divs一个变量并根据该变量修改您的代码。演示代码：var questionList = '';var scenario_question = [{&nbsp; &nbsp; "id": 16,&nbsp; &nbsp; "questions": "Who is this message for?",&nbsp; &nbsp; "duration": 60,&nbsp; &nbsp; "choices": [{&nbsp; &nbsp; &nbsp; &nbsp; "id": 61,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 16,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "guests"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "id": 62,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 16,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "Eskaya"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "id": 63,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 16,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "local artists"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "id": 64,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 16,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "conference attendees"&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; },&nbsp; {&nbsp; &nbsp; "id": 17,&nbsp; &nbsp; "questions": "What is displayed in the lobby? ",&nbsp; &nbsp; "duration": 60,&nbsp; &nbsp; "choices": [{&nbsp; &nbsp; &nbsp; &nbsp; "id": 65,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 17,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "plush furniture"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "id": 66,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 17,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "the 24-hour restaurant"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "id": 67,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 17,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "the main conference rooms"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "id": 68,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 17,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "art from various local artists "&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; },&nbsp; {&nbsp; &nbsp; "id": 18,&nbsp; &nbsp; "questions": "What type of establishment is Eskaya?",&nbsp; &nbsp; "duration": 60,&nbsp; &nbsp; "choices": [{&nbsp; &nbsp; &nbsp; &nbsp; "id": 69,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 18,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "a hotel"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "id": 70,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 18,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "a pool area"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "id": 71,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 18,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "a restaurant"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "id": 72,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 18,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "a conference center"&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; }]//loop through json array$(scenario_question).each(function(index, value) {&nbsp; //append value (questions)&nbsp; questionList += '<div class="display_question_scenario">' + (index + 1) + "." + " " + value.questions&nbsp; //create divs&nbsp; questionList += '<div id="question_choices" class="listening_question_choice">'&nbsp; var count = index + 1;&nbsp; $(value.choices).each(function(index, value) {&nbsp; &nbsp; //append choices&nbsp; &nbsp; questionList += '<input type="radio" name="answer_choice' + count + '" value="' + value.id + '"><label>' + value.choice + '</label><br>';&nbsp; })&nbsp; //close div&nbsp; questionList += '</div></div>'})$('.listening_question_scenario').html(questionList);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="listening_choices_wrapper">&nbsp; <div class="listening_question_scenario">&nbsp; &nbsp; <div id="display_question_scenario">&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

var s = [{&nbsp; &nbsp; "id": 16,&nbsp; &nbsp; "question": "Who is this message for?",&nbsp; &nbsp; "duration": 60,&nbsp; &nbsp; "choices": [{&nbsp; &nbsp; &nbsp; &nbsp; "id": 61,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 16,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "guests"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "id": 62,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 16,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "Eskaya"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "id": 63,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 16,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "local artists"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "id": 64,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 16,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "conference attendees"&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; },&nbsp; {&nbsp; &nbsp; "id": 17,&nbsp; &nbsp; "question": "What is displayed in the lobby? ",&nbsp; &nbsp; "duration": 60,&nbsp; &nbsp; "choices": [{&nbsp; &nbsp; &nbsp; &nbsp; "id": 65,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 17,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "plush furniture"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "id": 66,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 17,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "the 24-hour restaurant"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "id": 67,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 17,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "the main conference rooms"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "id": 68,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 17,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "art from various local artists "&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; },&nbsp; {&nbsp; &nbsp; "id": 18,&nbsp; &nbsp; "question": "What type of establishment is Eskaya?",&nbsp; &nbsp; "duration": 60,&nbsp; &nbsp; "choices": [{&nbsp; &nbsp; &nbsp; &nbsp; "id": 69,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 18,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "a hotel"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "id": 70,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 18,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "a pool area"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "id": 71,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 18,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "a restaurant"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; "id": 72,&nbsp; &nbsp; &nbsp; &nbsp; "question_id": 18,&nbsp; &nbsp; &nbsp; &nbsp; "choice": "a conference center"&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; }]var questionList = '';for (let i = 0; i < s.length; i++) {&nbsp; questionList = questionList + '<p id="display_question_scenario">' + (i + 1) + "." + " " + s[i].question;&nbsp; for (let x = 0; x < s[i].choices.length; x++) {&nbsp; &nbsp; questionList = questionList + '<input type="radio" name="answer_choice" value="' + s[i].choices[x].id + '"><label>' + s[i].choices[x].choice + '</label>';&nbsp; }}questionList += '</p>'$('.listening_question_scenario').html(questionList);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="listening_choices_wrapper">&nbsp; <div class="listening_question_scenario">&nbsp; &nbsp; <p id="display_question_scenario">&nbsp; &nbsp; </p>&nbsp; </div>&nbsp; <div id="question_choices" class="listening_question_choice">&nbsp; </div></div>