为什么我对.getJSON的使用不能始终如一地读取本地JSON文件？

Question

这是一个简单的工作示例，该示例读取两个本地数据文件并将结果附加到显示卡片的DOM上，然后显示代表一手牌的无序列表。

app.js

var main = function() {
    "use strict";

    $.getJSON("cards/aceOfSpades.json", function (data) {
        // create an element to hold the data
        var $cardParagraph = $("<p>");
        console.log("STUBB");
        // create the
        $cardParagraph.text(data.rank + " of " + data.suit);

        // append the card paragraph to main
        $("main").append($cardParagraph);
    });

    $.getJSON("cards/hand.json", function (hand) {
        var $list = $("<ul>");

        // hand is an array, so we can iterate over it
        hand.forEach(function (data) {
            // create a list item to hold the card
            // and append it to the list
            var $card = $("<li>");
            $card.text(data.rank + " of " + data.suit);
            $list.append($card);
        });
        // append the list to main
        $("main").append($list);
    });
};
$(document).ready(main);

hand.json

[
    { "suit" : "spades",    "rank" : "ace" },
    { "suit" : "hearts",    "rank" : "ten" },
    { "suit" : "spades",    "rank" : "five" },
    { "suit" : "clubs",     "rank" : "three" },
    { "suit" : "diamonds",  "rank" : "three" }
]

模仿这一点，我的代码尝试读取具有类似JSON记录数组的文件：

checkBoxesA.json

[
    { 
       "label": "New provider",  
       "note": "check if the applicant is not currently enrolled in the Medi-Cal
                program as a provider with an active provider number. Include 
                the NPI (or Denti-Cal provider number if applicable) for the 
                business address indicated in item 4. " 
    },
    {  "label": "Change of business address",
       "note":  "check if the applicant is currently enrolled in the Medi-Cal 
               program and is requesting to relocate to a new business address
               and vacate the old location. Indicate the business address 
               applicant is moving from."
    },
    . . .
]

这是不起作用的javaScript。 STUBB1没有打印到控制台，因此$.getJSON被忽略了吗？

var main = function () { 
    "use strict";

    console.log("Hello World!");

    $.getJSON("checkBoxesA.json", function (entry) {
        var $list = $("<ul>");

        console.log("STUBB1!");
        entry.forEach(function(entry){
            var $entry =$("<li>");
            $entry.text(entry.label + " of " + entry.text);
            $list.append($entry);
        });

        $("main").append($list);
    });

    console.log("STUBB2!");
};
$(document).ready(main);

Answer 1

STUBB1没有打印到控制台，因此$ .getJSON被忽略了吗？

不容忽视。 这可能是一个错误的请求，但是直到您添加代码来处理错误情况（或者只是在浏览器的控制台中查看），您才知道。 $.getJSON ， $.getJSON是异步的。 我建议只是在http://api.jquery.com/jquery.getjson/上阅读的网站，他们有一些例子。

Answer 2

（1）除非Chrome完全关闭后发出此shell命令，否则Google Chrome上的JavaScript无法读取本地JSON数据文件。

打开-Google \\ Chrome --args --allow-file-access-from-files

这将启动一个新的浏览器，该浏览器可以不受此类文件访问的限制。

对于Safari或Firefox，您不必执行任何上述操作。

（2）JSON文件中的文本必须正确构成，且没有嵌套的双引号或单引号！

因此，事后看来，这解决了我的问题。