#javascript #jquery #arrays
#javascript #jquery #массивы
Вопрос:
У меня есть этот массив ответов.
[
{
"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
Что-то вроде этого.
Вот код и выходные данные, которые у меня есть в настоящее время.
var questionList = '';
var radioChoices = '';
for (var i = 0; i < scenario_question[0].questions.length; i ) {
questionList = questionList '<p id="display_question_scenario">' (i 1) "." " " scenario_question[0].questions[i].question;
for (var x = 0; x < scenario_question[0].questions[i].choices.length; x ) {
radioChoices = radioChoices '<input type="radio" name="answer_choice" value="' scenario_question[0].questions[i].choices[x].id '"><label>' scenario_question[0].questions[i].choices[x].choice '</label>';
}
}
$('.listening_question_scenario').html(questionList);
$('#question_choices').html(radioChoices); <div id="listening_choices_wrapper">
<div class="listening_question_scenario">
<p id="display_question_scenario">
</p>
</div>
<div id="question_choices" class="listening_question_choice">
</div>
</div> Результат, который у меня есть:
1. Who is this message for?
2. What is displayed in the lobby?
3. What type of establishment is Eskaya?
guests
Eskaya
local artists
conference attendees
plush furniture
the 24-hour restaurant
the main conference rooms
art from various local artists
a hotel
a pool area
a restaurant
a conference center
Что я делаю не так? вместо отображения вариантов в их собственных вопросах, он просто отображается таким образом. Кто-нибудь может помочь мне исправить меня. Любая помощь была бы очень признательна.
Ответ №1:
В вашем текущем коде вы добавляете htmls две разные переменные, поэтому результаты приходят отдельно. Вместо этого вы можете добавить divs внутри одной переменной и изменить свой код в соответствии с этим.
Демонстрационный код :
var questionList = '';
var scenario_question = [{
"id": 16,
"questions": "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,
"questions": "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,
"questions": "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"
}
]
}
]
//loop through json array
$(scenario_question).each(function(index, value) {
//append value (questions)
questionList = '<div class="display_question_scenario">' (index 1) "." " " value.questions
//create divs
questionList = '<div id="question_choices" class="listening_question_choice">'
var count = index 1;
$(value.choices).each(function(index, value) {
//append choices
questionList = '<input type="radio" name="answer_choice' count '" value="' value.id '"><label>' value.choice '</label><br>';
})
//close div
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">
<div class="listening_question_scenario">
<div id="display_question_scenario">
</div>
</div>
</div> Ответ №2:
var s = [{
"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"
}
]
}
]
var questionList = '';
for (let i = 0; i < s.length; i ) {
questionList = questionList '<p id="display_question_scenario">' (i 1) "." " " s[i].question;
for (let x = 0; x < s[i].choices.length; x ) {
questionList = questionList '<input type="radio" name="answer_choice" value="' s[i].choices[x].id '"><label>' s[i].choices[x].choice '</label>';
}
}
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">
<div class="listening_question_scenario">
<p id="display_question_scenario">
</p>
</div>
<div id="question_choices" class="listening_question_choice">
</div>
</div>