Display all items in array through a for loop + jquery

Question

Problem

I'm having an issue with the for loop at the bottom of the code with displaying the choices array correctly. The console log for the loop is bringing back all four items in the array, so I don't think that's incorrect. But the $(choiceList).append(choice) line is bringing back all four items four times and using that as the text label for all four radio buttons.

Image

Code

<div class="answers">
    <div class="form-check text-center">
        <label class="form-check-label text-center">
        <input class="form-check-input" type="radio" name="answer" id="answer" value="1" required>
        </label>
    </div>

    <div class="form-check text-center">
        <label class="form-check-label text-center">
        <input class="form-check-input" type="radio" name="answer" id="answer" value="2">
        </label>
    </div>

    <div class="form-check text-center">
        <label class="form-check-label text-center">
        <input class="form-check-input" type="radio" name="answer" id="answer" value="3">
        </label>
    </div>

    <div class="form-check text-center">
        <label class="form-check-label text-center">
        <input class="form-check-input" type="radio" name="answer" id="answer" value="4">
        </label>
    </div>
</div>

let questions = [{
    question: "This is just a test question for later. What is the answer?",
    choices: ["Answer 1", "Answer 2", "Answer 3", "Answer 4"],
    correctAnswer: 1
    }, {
    question: "This is just another test question for later. What is the answer?",
    choices: ["Answer 1", "Answer 2", "Answer 3", "Answer 4"],
    correctAnswer: 3
    }];

let currentQuestion = 0;
let currentScore = 0;

function displayCurrentQuestion() {
    let question = questions[currentQuestion].question
    let questionDisplay = $('#quiz').find('.question-text')

    $(questionDisplay).text(question);

    let choiceList = $('#quiz').find('.form-check-label')
    let numChoices = questions[currentQuestion].choices.length;

    var choice;
    for(let i = 0; i < numChoices; i++) {
        choice = questions[currentQuestion].choices[i];
        console.log(choice);
        $(choiceList).append(choice);
    };
};

Answer 1

Your call to get choiceList actually returns multiple items. I think you just need an outer loop:

function displayCurrentQuestion() {
    let question = questions[currentQuestion].question
    let questionDisplay = $('#quiz').find('.question-text')

    $(questionDisplay).text(question);

    // this gets more than one dom element
    let choiceLists = $('#quiz').find('.form-check-label')
    let numChoices = questions[currentQuestion].choices.length;

    var choice;

    // So iterate over them
    for(let l = 0; i < choiceLists.length; l++) {
      choiceList = choiceLists[l];
      for(let i = 0; i < numChoices; i++) {
          choice = questions[currentQuestion].choices[i];
          console.log(choice);
          $(choiceList).append(choice);
      };
    };
};

Answer 2

Your choiceList variable actually has all 4 answer elements. When you do .append operation, append the i 'th choice into i 'th element.

 let questions = [{ question: "This is just a test question for later. What is the answer?", choices: ["Answer 1", "Answer 2", "Answer 3", "Answer 4"], correctAnswer: 1 }, { question: "This is just another test question for later. What is the answer?", choices: ["Answer 1", "Answer 2", "Answer 3", "Answer 4"], correctAnswer: 3 }]; let currentQuestion = 0; let currentScore = 0; function displayCurrentQuestion() { let question = questions[currentQuestion].question let questionDisplay = $('#quiz').find('.question-text') $(questionDisplay).text(question); let choiceList = $('#quiz').find('.form-check-label') let numChoices = questions[currentQuestion].choices.length; var choice; for(let i = 0; i < numChoices; i++) { choice = questions[currentQuestion].choices[i]; console.log(choice); //This is line is changed $(choiceList[i]).append(choice); }; }; $(() => { displayCurrentQuestion(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="quiz"> <p class="question-text"></p> <div class="answers"> <div class="form-check text-center"> <label class="form-check-label text-center"> <input class="form-check-input" type="radio" name="answer" id="answer" value="1" required> </label> </div> <div class="form-check text-center"> <label class="form-check-label text-center"> <input class="form-check-input" type="radio" name="answer" id="answer" value="2"> </label> </div> <div class="form-check text-center"> <label class="form-check-label text-center"> <input class="form-check-input" type="radio" name="answer" id="answer" value="3"> </label> </div> <div class="form-check text-center"> <label class="form-check-label text-center"> <input class="form-check-input" type="radio" name="answer" id="answer" value="4"> </label> </div> </div>