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

这似乎得到了我需要的东西，但最终我还需要更进一步，单独将问题放在标题标签以及列表项中的答案中，这样才能控制这一点。< / p>

任何输入都将不胜感激。提前谢谢。

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来构建测验。

＆＃13;

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

＆＃13;

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

＆＃13;

显示嵌套的JSON数据

3 个答案: