尝试从 JSON 文件填充 JQuery 中的列表.如何调试

Trying to populate a list in JQuery from a JSON file. How to debug?

本文关键字：何调试 列表 调试 JSON 文件 JQuery 填充      更新时间：2023-09-26

所以我有一个JSON文件，我需要从中获取测验问题。现在，我只是将问题作为对象存储在数组中。每个问题对象都有"文本"（问题本身）、"选择"（可能答案的数组）和"答案"（对应于正确答案选择位置的 int）。

如何检查是否正确存储了问题对象？我想创建一个问题列表，我尝试用问题[i].text填充我的列表，但它不起作用。我安装了Firebug来调试正在发生的事情，但我不完全确定如何充分利用它。

JSON 采用以下格式：

{
"text": "What does the author least like about Eclipse?", 
"choices": [
    "The plugin architecture.",
    "FindBugs.",
    "Refactoring.",
    "The Run As menu."],
"answerswer": 3
}

我的 JavaScript 文件： 

$(document).ready(function(){
var questions=[];
$.getJSON('quiz.js',function(data){
     var i=0;
     for(i=0;i<data.length;i++){
        questions[i]=[String(data[i].text),String(data[i].choices),int(data[i].answer)];
    }
    var list = $('#list')
    $(questions).each(function(_, text) {
    var item = $('<li/>')
    var link = $('<a/>').html(text)
    link.click(function() { alert(text) })
    item.append(link)
    list.append(item)
    })
    $('#list').listview('refresh')

});
})

最后，一些 HTML： 

 <div data-role="content">
    <ul id="list" data-role="listview">
    </ul>
</div>

我知道这是一个很长的问题，但我真的很感激任何帮助。最终目标是有一个问题列表，单击该列表时，将显示答案选项并提供一个 Toast，以通知用户所选选项是否正确。如果回答正确，我还想以绿色突出显示列表中的问题，否则以红色突出显示。

编辑：

工作代码： 

$(document).ready(function(){
$.getJSON('quiz.js',function(data){
var questions = data;
var list = $('#list')
$(questions).each(function(index, object) {
 $.each(object, function(key, value){
    if(key === 'text'){
        //do something with qustion
            var item = $('<li/>')
            var link = $('<a/>').html(value)
            link.click(function() { alert(value) })
            item.append(link)
            list.append(item)
            $('#list').listview('refresh')
        }
      });
    });
  });
});

你用错each。第二，您必须意识到，您将在 JSON 响应中返回对象对象。您需要循环访问包含问题/答案数据的每个对象，并进一步迭代该问题/答案对象。此外，您在该嵌套对象中嵌套了一个数组，并且需要遍历该数组以获取您的问题。看看一些伪代码：

//will give you each object your data
$.each(data, function(key, object){
    //do something with my [Object, Object]
    $.each(object, function(key, value){
        if(key === 'text'){
            //do something with qustion
        }
        if(key === 'choices'){
            //loop over array
        }
    }
}

试试这个。

var ques=[];
$.getJSON('quiz.js',function(data){
for(var i in data)
{
var text =data[i].text;
var choic=data[i].choices;
var output='<li>'+text+'</li>';
}
$('#list').empty().append(output);
});

当你到达它时，你真的在迭代一系列选择吗？ 这是一个小提琴

你要么需要使用jQuery中找到的$.each，要么你想要纯javascript。

for (property in object) {
  if (object.hasOwnProperty(property)) {
    // do stuff
  }
}

据我所知：questions是几个元素的数组。这些元素又是三个元素（文本、选择和答案）的数组。

您正在使用 jquery 选择器中的问题数组来表示each语句。

以下是执行所需操作的更好方法：

$.each(questions, function (i, value) {
    var text = questions[i][0];
    var choice = questions[i][1];
    var answer = questions[i][2];
    var output='<li>'+text+'</li>';
    // rest of your code using text, choices and answers
});
相关文章：