顯示嵌套的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>