Iterate over an array of objects only once

Question

$(document).ready(function() {

allQuestions is the array of objects, which role is providing the questions(question), the answers(choices) and the correct response(correctAnswer) for my app.

        var allQuestions = [{question: "If you were a super hero what powers would you have?",
            choices: ["a", "b", "c", "d"],
            correctAnswer:0},

            {question: "Do you have a cherished childhood teddybear?",
                choices: ["e", "f", "g", "j"],
                correctAnswer:0},

            {question: "Whats your favourite non-alcoholic drink?",
                choices: ["i", "j", "k", "l"],
                correctAnswer:0},

            {question: "Are you religious?",
                choices: ["m", "n", "o", "p"],
                correctAnswer:0}];

Next, once my button, with #next id is clicked, the paragraph with id #question should change his text with the next question from the allQuestions array.

The real result? When I clicked on next button, the function iterates over all the questions and it showed the last one only.

I tried to use a solution from stackoverflow, setting a var hasLooped but doesn't work.

        $('#next').click(function(){
            //var hasLooped = false;
            $.each(allQuestions, function(key){

               // if(!hasLooped) {
                    $('#question').text(allQuestions[key].question);
               // }
               // hasLooped = true;
            })
        })
    });

score 1 · Accepted Answer · edited Jul 08 '14 at 10:00

1

Save index of question in a variable and increment it whenever #next is clicked.

Write this:

$(function () {
    var count = 0,
        len = allQuestions.length;
    $('#next').click(function () {
        if (count < len - 1) {
            count++;
            $('#question').text(allQuestions[count].question);
        } else {
            $(this).remove();
    });
});

fiddle

edited Jul 08 '14 at 10:00

Alex

11,115
12
51
64

answered Jul 08 '14 at 09:19

codingrose

15,563
11
39
58

score 0 · Answer 2 · answered Jul 08 '14 at 09:14

You need to store the current question somewhere externally and refer to that rather than the key passed to the each function as that will always loop through all and you'll see the last one.

var intNum = 1;

$('#next').click(function(){

    $('#question').text(allQuestions[intNum].question);
    intNum++;
});

score 0 · Answer 3 · answered Jul 08 '14 at 09:22

0

var clickCount = 0;
$('#next').click(function(){        
  $('#question').text(allQuestions[clickCount].question);       
  clickCount=(clickCount+1>9)?0:clickCount+1;
});

answered Jul 08 '14 at 09:22

Gilsha

14,431
3
32
47

why `(clickCount+1>9)?0:clickCount+1;`? – Carson Ip Jul 08 '14 at 09:25
Just to iterate over allQuestions array – Gilsha Jul 08 '14 at 09:39
`var MAX=10; clickCount=(clickCount+1)%MAX;` sounds more intuitive to me. – Carson Ip Jul 08 '14 at 09:48
yeah. That way is better. – Gilsha Jul 08 '14 at 09:51

score 0 · Answer 4 · answered Jul 08 '14 at 09:29

If you don't like global variables, you may try this:

$('#next').click(function(){
    var counter = parseInt($("#next").attr("counter"));
    if (counter>=allQuestions.length){
        alert("No more questions!");
        return;
    }
    $('#question').text(allQuestions[counter].question);
    $("#next").attr("counter",counter+1);
});

DEMO HERE

Iterate over an array of objects only once

4 Answers4