jQuery click method returning undefined when iterating over array nested in object nested in another array

Question

Why does the click method return undefined after the for in loop iterates over the first array of answer objects?

var i = 0;
var j = 0;

var allQuestions = [{question:"What is the color of the sky?",answer:["blue","yellow",  
                "red"],correctAnswer:["blue",1]},{question:"What is the opposite of  
                 up?",answer:["down","sideways", "circle"],correctAnswer:["down",1]},
                {question:"What is the first number?",answer:["1","5", "7"],correctAnswer:
                ["1",1]}];

$(document).ready(function() {  

    function changeQuestion() {
        $("#radios").empty();
        for( answers in allQuestions[i].answer) {
            var radioBtn = $('<input type="radio" class="radios" name="btnAnswers" value="'+ 
                allQuestions[i].answer[j] + '" /><label for ="secondbtn">'
                + allQuestions[i].answer[j] + '</label>');
            radioBtn.appendTo('#radios');
            alert(allQuestions[i].answer[j]);
            j++;
        }
        i++;
        return true;
    };

    $("#nextbtn").click(function(){
        changeQuestion();
    });
});

This question's fiddle

@Roamer-1888 Sorry, didn't add them in the initial post. They are there now but still doesn't work. — Stu
– Stu, Commented Nov 6, 2015 at 1:27

Roamer-1888 · Accepted Answer · 2015-11-06 02:09:34Z

1

As the .answer property of the objects is an array, you can loop with

for(var j=0; allQuestions[i].answer.length; j++) {...}

instead of

for(answers in allQuestions[i].answer) {...}

Full code will be :

$(document).ready(function() {
    var i = 0;
    function changeQuestion() {
        $("#radios").empty();
        var obj = allQuestions[i];
        for(var j=0; j<obj.answer.length; j++) {
            $('<input type="radio" class="radios" name="btnAnswers" value="' + obj.answer[j] + '" /><label for ="secondbtn">' + obj.answer[j] + '</label>').appendTo('#radios');
        }
        i++;
    };
    $("#nextbtn").click(changeQuestion);
});

https://jsfiddle.net/zu9e5poh/10/

edited Nov 6, 2015 at 2:09

answered Nov 6, 2015 at 2:02

Roamer-1888

19.3k5 gold badges35 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stu Over a year ago

Thanks this worked! Can you explain (or provide links ) why the "for in" loop returned undefined on the second run of changeQuestion?

Roamer-1888 Over a year ago

Your for(... in ...) construction isn't actually the culprit. It's the j counter, which keeps on incrementing, so on the second run, it will start at 3. If you were to move var j = 0 inside changeQuestion(), then it will be reset to zero at the start of every run. In my version, for(var j=0; ...) has exactly the same effect.

MDJ · Accepted Answer · 2015-11-06 01:07:14Z

0

you have to initialize values to variables i & j

modify the code to

    $(document).ready(function() {  
function changeQuestion() {
$("#radios").empty();

var  i=0, j=0;

for( answers in allQuestions[i].answer) {
    var radioBtn = $('<input type="radio" class="radios" name="btnAnswers" value="'+ 
                    allQuestions[i].answer[j] + '" /><label for ="secondbtn">' 
            + allQuestions[i].answer[j] + '</label>');
    radioBtn.appendTo('#radios');
    alert(allQuestions[i].answer[j]);
 j++;
}
 i++;
 return true;
};
$("#nextbtn").click(function(){
    changeQuestion();
 });

});

answered Nov 6, 2015 at 1:07

MDJ

3662 silver badges8 bronze badges

1 Comment

Stu Over a year ago

@MJD I added the initialization and array in the fiddle, as well as an alert to show how the code steps but it's not working still.

Collectives™ on Stack Overflow

jQuery click method returning undefined when iterating over array nested in object nested in another array

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related