Using a for loop to dynamically print multidimensional array elements

Question

I am writing a javascript program to dynamically print the elements of a multidimensional array to create a quiz. My structure is correct but I'm trying to print the 'choice' elements so they are displayed as radio buttons for the choices of each question.

Javascript:

var dataquestions = [];

dataquestions[0] = {question: "Who is the prime Minister of the United Kingdom?",     choice0: "David Cameron", choice1: "Tony Blair", choice2:"Gordon Brown", answer:"David Cameron"};

 dataquestions[1] = {question:"In what year was the Declaration of Independence signed?", choice0:"1985", choice1:"1492", choice2:"1776", answer:"1776"};

dataquestions[2] = {question:"Which country is in Europe?", choice0:"Pakistan", choice1:"France", choice2:"Australia", answer:"France"};

for (var i=0; i<=2; i++)
{
document.getElementById('quizcontain').innerHTML+= '<p>'+ dataquestions[i].question+'</p><br><br>';

for (var j=0; j<=2; j++){
document.getElementById('quizcontain').innerHTML+='<input type="radio" name='+j+'>'+dataquestions[i].choice+j+'<br>';
    }
}

Output:

Who is the prime Minister of the United Kingdom?

undefined
undefined
undefined
In what year was the Declaration of Independence signed?

undefined
undefined
undefined
Which country is in Europe?

undefined
undefined
undefined

thefourtheye · Accepted Answer · 2014-03-03 05:12:54Z

1

You cannot use

dataquestions[i].choice+j

to access the properties of the objects. But, you can use the subscript notation, like this

dataquestions[i]["choice" + j]

answered Mar 3, 2014 at 5:12

thefourtheye

241k53 gold badges466 silver badges505 bronze badges

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

4 Comments

thefourtheye Over a year ago

@JeffP. You are welcome :) Please forget not to tick this answer :)

z atef Over a year ago

Nice , @thefourtheye.

z atef Over a year ago

If this answers your question you are supposed to accept. As future reference for other users @jeff-p

Ja͢ck Over a year ago

@NullSoulException I think OP is aware of that :)

Ja͢ck · Accepted Answer · 2014-03-03 05:33:28Z

1

This part of your code:

dataquestions[i].choice+j

Gets evaluated as the concatenation of dataquestions[i].choice and j, which is effectively undefined + j. To reference a dynamically named property you have to concatenate 'choice' and j and then use [] dereferencsing, so dataquestions[i]['choice' + j].

Secondly, it would be a good thing to normalize your data structure:

var dataquestions = [{
    question: "Who is the prime Minister of the United Kingdom?",
    choices: ["David Cameron", "Tony Blair", "Gordon Brown"],
    answer: 0
}, {
    question: "In what year was the Declaration of Independence signed?",
    choices: ["1985", "1492", "1776"],
    answer: 2
}, {
    question:"Which country is in Europe?", 
    choices: ["Pakistan", "France", "Australia"],
    answer: 1
}];

Then:

var container = document.getElementById('quizcontain');
for (var i=0; i < dataquestions.length; i++) {
    var question = dataquestions[i],
    html;

    html = '<p>' + question.question + '</p><br><br>';

    for (var j = 0; j < question.choices.length; ++j) {
        html += '<input type="radio" name="' + j + '">' + question.choices[j] + '<br>';
    }

    container.innerHTML += html;
}

Demo

edited Mar 3, 2014 at 5:33

answered Mar 3, 2014 at 5:20

Ja͢ck

174k39 gold badges269 silver badges316 bronze badges

2 Comments

z atef Over a year ago

That's neat @jack. It have been a while since I used JavaScript but looking at theses answers refreshes my skills

Jeff P. Over a year ago

This is a great structure but it is only printing out the last question.

Sajad Karuthedath · Accepted Answer · 2014-03-03 05:16:36Z

0

use

dataquestions[i]["choice" + j]

answered Mar 3, 2014 at 5:16

Sajad Karuthedath

16.2k4 gold badges35 silver badges50 bronze badges

Collectives™ on Stack Overflow

Using a for loop to dynamically print multidimensional array elements

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest