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.

forgivenson · Accepted Answer · 2014-11-20 17:52:51Z

5

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]);
}

answered Nov 20, 2014 at 17:52

forgivenson

4,4332 gold badges21 silver badges28 bronze badges

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

Comments

Maz · Accepted Answer · 2014-11-20 17:58:43Z

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.

Marc · Accepted Answer · 2014-11-20 19:33:55Z

0

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&uuml;dkorea']
 }
           ]

edited Nov 20, 2014 at 19:33

answered Nov 20, 2014 at 19:27

Marc

1372 silver badges12 bronze badges

Collectives™ on Stack Overflow

Use a variable as a JSON key

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related