Use a variable as a JSON key

Question

I want to shorten my code and I am stuck. I have a quiz and for each question the answers are loaded. But I want to have a variable that does that for me.

Here is the code:

if (nr === 1) {
    $('#questionmobile').html(content.inst3.question1);
    $('#answer1').html(content.inst3.q1a1);
    $('#answer2').html(content.inst3.q1a2);
    $('#answer3').html(content.inst3.q1a3);
    $('#answer4').html(content.inst3.q1a4);
} else if (nr === 2) {
    $('#questionmobile').html(content.inst3.question2);
    $('#answer1').html(content.inst3.q2a1);
    $('#answer2').html(content.inst3.q2a2);
    $('#answer3').html(content.inst3.q2a3);
    $('#answer4').html(content.inst3.q2a4);
}......

As you can see its very redundant, so I thought to include the variable "nr" that has the information of the number of question. So I want something like:

$('#questionmobile').html(content.inst3.question+nr);
$('#answer1').html(content.inst3.q+nr+a1);

The concatenation +nr+ is not working, since it doesn't direct to the right JSON content.

Answer 1

You can use bracket notation (like an array, [] ) if you want to use a variable as a key.

$('#questionmobile').html(content.inst3['question'+nr]);
$('#answer1').html(content.inst3['q'+nr+'a1']);

You could even use a loop for the answers:

$('#questionmobile').html(content.inst3['question'+nr]);

var i, numAnswers = 4;
for(i = 1; i <= numAnswers; i++) {
    $('#answer' + i).html(content.inst3['q'+nr+'a'+i]);
}

Answer 2

First, when you say content.inst3.q+nr+a1 JavaScript interprets that as (content.inst3.q)+(nr)+(a1) , so it is adding variables together that do not exist.

The answer to the question that you asked is that you can use brackets to access a field in an object by a string name. For example:

var x = {name: "Joe", age:56};
alert(x["name"]); //Outputs Joe
alert(x["age"]); //Outputs 56

You can use this same technique to compose a string that matches your pattern. However, that is probably not the best approach. You likely should instead restructure your input data so that you do not need to use this technique. For example, you could have your data look something like:

{
    "questions": [
        {
            "prompt": "Who was the first president of the US?",
            "answers": ["George Washington", "Abraham Lincoln", "Captain America", "The Hulk"]
        }
    ]
}

This would structure your data into arrays, which seems to better match your use case for this data.

Answer 3

Thanks guys, both answers helped. My solution is a mix of your answers.

$('#questionmobile').html(content.inst3.questions[nr - 1].question);
var i, numAnswers = 3;
for (i = 0; i <= numAnswers; i++) {
$('#answer' + (i + 1)).html(content.inst3.questions[nr - 1].answers[i]);
}

And I cleaned my JSON structure:

"questions":[
 {
       "question":"bla?",
       "answers":["Toto Arno",'Anders Thomas','Tadao Ando','Tadaaa Anden']
 },
 {
       "question":'bli?',
       "answers":["Wasser",'Papier','Stein','Schere']
 },
 {
       "question":'blu?',
       "answers":["Deutschland",'Niederlande','Bosnien und Herzegowina','Südkorea']
 }
           ]