CODEWITHSUNDEEP
javascripthtml
Jeff P.
Jeff P.

Reputation: 3004

Using a for loop to dynamically print multidimensional array elements

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

Upvotes: 2

Views: 533

Answers (3)

Ja͢ck
Ja͢ck

Reputation: 173592

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

Upvotes: 1

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

use 

dataquestions[i]["choice" + j]

Upvotes: 0

thefourtheye
thefourtheye

Reputation: 239513

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]

Upvotes: 1

Related Questions