javascript - 使用.getJSON在本地提取JSON数据但数据不会出现

Question

首先，我尝试解析 JSON 并且在本地使用文件。

当我运行以下命令时:

$.getJSON('/trivia_demos.json', function(data) {
   alert("It worked!); }); 

出现警报框，我可以确认我正在本地调用正确的文件。 Console.log 也可以工作。到目前为止，一切都很好。

我现在想提取数据的几个部分并将它们显示在页面上。 JSFiddle在这里，但相关代码如下:

    $.getJSON('/trivia_demos.json', function(data) {
    var items = [] 
     $.each(data.reponse, function(item, i) {
        items.push('<li id="' + i.order + '">' + i.question + ' - ' + i.answer + '</li>');
        });

$('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
 }).appendTo('#example');});

实际上，我希望将顺序、问题和答案附加到我的 div“#example”中。当我加载页面时，什么也没有发生。鉴于我的第一点，我相信我搞砸了 JQuery 的构建来定位这三个数据并显示它们。

我相信调用 json 文件和实际访问 json 对象之间缺少一些东西。

此外，在 trivia_demos.json 文件中，存在以下 json。

[{"id":1,"order":1,"question":"Who was the only American President to 
learn English as a second language? ","answer1":"John Quincy Adams",
"answer2":"Martin van Buren","answer3":"William McKinley ",
"answer4":"Andrew Jackson","correcta":"Martin van Buren",
"published":"2014-11-04","url":"http://example.com/trivia_demos/1.json"}]

Answer 1

基于jquery.getjson documentation $each 循环应该只使用数据参数:

$.getJSON( "ajax/test.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
  });

  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});

此外，我在没有 json 部分的情况下测试了您的代码，除了我更改为 i.answer1 的 i.answer 以及 data.response< 之外，它工作得很好 更改为 data:

$.each(data, function (item, i) {
    items.push('<li id="' + i.order + '">' + i.question + ' - ' + i.answer1 +  '</li>');
});

Fiddle