JSON 没有被 $.getJSON 抢到

Question

最终解决方案： 我的 .json 文件格式有问题，比我在问题中包含的片段更深。现在一切正常。非常感谢评论中的每个人，我将@TWLATL 的回答标记为正确，因为它是一个格式良好的函数解决方案，我可以在以后的项目中使用。

我正在尝试从 script.js（都在 root 目录中）访问我的 data.json 文件，但它似乎根本不是运行 .在我进行错误处理之前，我没有得到函数运行的指示。感谢评论，我用 .fail 替换了 .error，但我仍然不明白为什么它失败了。

index.html

<body>
    <h1>JSON Render</h1>
    <div id="fileViewer"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="script.js"></script>
</body>

script.js

$.getJSON('data.json', function(data) {
    console.log('json grabbed')
    console.log(data);
})
.fail(function(data) {
    console.log("GetJSON Error!");
    console.log(data);
});

$.ajax({
    url: 'data.json',
    dataType: 'json',
    success: function( data ) {
        console.log( "SUCCESS: " );
        console.log( data );
    },
    error: function( data ) {
        console.log( "AJAX ERROR: " );
        console.log( data );
    }
});

data.json（样本）

{
    "children": [
      {
        "name": "Main Folder",
        "type": "folder"
      },
      {
        "name": "Private folder",
        "type": "folder"
      }
    ]
}

我一直在 Stack Overflow 上四处寻找，但我发现没有任何解决方案似乎可以解决我的问题。求助！

编辑：将 jQuery CDN 添加到我的 index.html。它在那里。我只是忘了把它放在问题中。

编辑 2：更新了 script.js 以反映返回以下屏幕截图的代码。（屏幕截图在对象中间被截断了。如果对象的上下文实际上是相关的，我可以包括更多内容。）

编辑 3：新 AJAX 错误处理： 新的 ajax 函数：

$.ajax({
    url: 'data.json',
    dataType: 'json',
    success: function( data ) {
        console.log( "SUCCESS: " );
        console.log( data );
    },
    error: function(data, textStatus, errorThrown) {
        console.log("textStatus: ",textStatus);
        console.log("errorThrown: ",errorThrown);
    }
});

我现在非常棒地得到这个控制台输出：

Answer 1

使用稍微修改过的代码版本，我让它返回 JSON 就好了：

http://plnkr.co/edit/DMLyJa1Quj7ofszn5Y7o?p=info

$(document).ready(function() {
  console.log("ready!");

  var items;

  $.getJSON('data.json', function(data) {
      console.log('json grabbed');
    })
    .done(function(data) {
      items = data.children;
      console.log(items);
    })
    .fail(function(data) {
      console.log("Error!");
    });

}); // close document.ready

Jquery 现在使用 .done 作为成功方法。在该块中，只需将您的 data.children 项目分配给一个变量，您就可以开始了。

Answer 2

感谢评论中的每个人，我才得以解决问题。这实际上是 JSON 格式问题。我使用这个网站来查找问题所在：https://jsonformatter.curiousconcept.com/

JSON 没有被 $.getJSON 抢到

JSON Not grabbed by $.getJSON

javascript

jquery

json

getjson