显示嵌套的JSON数据

Question

目前，目前正在用Javascript进行测验，其中问题和答案位于嵌套的JSON数据结构中。 我的结构看起来像这样：

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." }
    ]
  }
]

显然，这是一种有点可笑的方法，但是我对获取问题的值以及可用答案的逻辑有些困惑。

现在，我将仅通过log console.log语句显示进度。

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

这样做似乎可以满足我的需要，但最终我需要走得更远，并将问题单独放在标题标签中以及将答案放在列表项中，因此拥有这种控制很重要。

任何投入将不胜感激。 先感谢您。

Answer 1

如果您想在页面上展示您的问题和答案，这种代码将创建一些贯穿您的对象并允许参与者选择响应的内容：

 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> 

我已经编辑了对象的结构，以使其更容易遍历。 另外，请注意，使用标签可以使用户灵活地单击单选按钮或标签内的任何文本。

Answer 2

循环应类似于：

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

在您的实际代码中，您可能会将其显示为嵌套的HTML列表或<table> 。

Answer 3

您可以将forEach函数与jQuery结合使用来构建测验。

 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>