Displaying nested JSON data

Question

Currently working on a quiz at the moment in Javascript where the question and answers are in a nested JSON data structure. My structure looks something like this:

var quizContent = [
  {
    "question": "Why is the sky blue?",
    "answers": [
      { "answer": "Blue light is scattered in all directions by the tiny molecules of air in Earth's atmosphere." },
      { "answer": "Idk dude" },
      { "answer": "google.com" },
      { "answer": "It just is." }
    ]
  },
  {
    "question": "Why did the chicken cross the road?",
    "answers": [
      { "answer": "To get to the other side." },
      { "answer": "Obama amiriteeee" },
      { "answer": "To escape genocide. "},
      { "answer": "To find itself." }
    ]
  }
]

Obviously this is a somewhat comical approach, but I'm a little stuck on the logic of getting the values for the questions followed by the available answers.

For now I'll just show the progress through log console.log statements.

for (var i = 0; i < quizContent.length; i++){
  var obj = quizContent[i];
  for (var key in obj) {
    console.log(obj[key]);
  }
}

With this seems to get sort of what I need but eventually I'll need to go a bit further and individually put the questions in header tags as well as the answers in list items so having that control is important.

Any input would be greatly appreciated. Thank you in advance.

What's your question? Its a good post but I can't really tell what you're asking. — Feathercrown
– Feathercrown, Commented Feb 12, 2018 at 17:29
@Feathercrown apologies for any confusion with my phrasing. Essentially I'm looking to individually get each question and it's available answers. — thelgloriouspast
– thelgloriouspast, Commented Feb 12, 2018 at 17:34

score 4 · Accepted Answer · 2018-02-12 18:36:27Z

4

If you want to present your questions and answers on the page, this sort of code will create something that will go through your object and allow participants to select a response:

var quizContent = [
  {
    "question": "Why is the sky blue?",
    
    // note lack of "answer" key for each answer.    
    "answers": [
      "Blue light is scattered in all directions by the tiny molecules of air in Earth's atmosphere.",
      "Idk dude", 
      "google.com", 
      "It just is."
    ]
  },
  {
    "question": "Why did the chicken cross the road?",
    "answers": [ 
      "To get to the other side.", 
      "Obama amiriteeee", 
      "To escape genocide. ", 
      "To find itself."
    ]
  }
];

form_div_html = '';
quizContent.forEach(function(row,index){
  form_div_html += "<h1>"+row.question+"</h1>";
  row.answers.forEach(function(answer){
    form_div_html += "<label><input type='radio' name='question_"+index+"' value='"+answer+"'>"+answer+"</label><br>";
  });
  form_div_html += "<br>";
});
document.getElementById("form_div").innerHTML = form_div_html;

<div id="form_div"></div>

I've edited the structure of your object to make it easier to loop through. Also, note that using labels gives you user the flexibility of clicking on the radio button, or any of the text within the label.

edited Feb 12, 2018 at 18:36

answered Feb 12, 2018 at 17:33

user4490801

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

10 Comments

Feathercrown Over a year ago

Nice, although I'd put the radio button before the text.

user4490801 Over a year ago

ha ha! I was just doing that as you said it

Feathercrown Over a year ago

Ah, much better. ;)

thelgloriouspast Over a year ago

I like this answer and thanks for the clarity on the advantage of radio buttons/labels. The only thing I'm wondering about is that when implementing your solution, the question is fine, however, the answers seem to output "[object Object]"? Any thoughts?

user4490801 Over a year ago

I think that's because I changed my structure of the json object. Try copying out the whole of my var quizcontent and compare with your original, and that might show the differences.

|

Barmar · Accepted Answer · 2018-02-12 17:31:10Z

1

The loop should be like:

for (var i = 0; i < quizContent.length; i++){
  var obj = quizContent[i];
  var question = obj.question;
  console.log(`Question #${i}: ${question}`);
  for (var j in obj.answers) {
    var answer = obj.answers[i].answer;
    console.log(`Answer #${j}: ${answer}`);
  }
}

In your actual code you would probably display this as nested HTML lists or a <table>.

answered Feb 12, 2018 at 17:31

Barmar

789k57 gold badges554 silver badges669 bronze badges

Comments

Ele · Accepted Answer · 2018-02-12 17:32:17Z

You can use forEach function along with jQuery to build your quiz.

var quizContent = [
  {
    "question": "Why is the sky blue?",
    "answers": [
      { "answer": "Blue light is scattered in all directions by the tiny molecules of air in Earth's atmosphere." },
      { "answer": "Idk dude" },
      { "answer": "google.com" },
      { "answer": "It just is." }
    ]
  },
  {
    "question": "Why did the chicken cross the road?",
    "answers": [
      { "answer": "To get to the other side." },
      { "answer": "Obama amiriteeee" },
      { "answer": "To escape genocide. "},
      { "answer": "To find itself." }
    ]
  }
];

var $quiz = $('#quiz');
quizContent.forEach((q, i) => {
  var question = q.question;
  var answers = q.answers;
  
  var $qelem = $(`<h2>#${i + 1} ${question}</h2>`);
  $quiz.append($qelem);
  
    answers.forEach((a, j) => {
      $quiz.append($(`<li>${i + 1}.${j + 1} ${a.answer}</li>`));
    });
  
  $quiz.append($('hr'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='quiz'>
<div>

Collectives™ on Stack Overflow

Displaying nested JSON data

3 Answers 3

10 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related