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.

Answer 1

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.

Answer 2

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> .

Answer 3

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>