如何使用 JavaScript 离线阅读 JSON 文件？

Question

我试图在我的本地计算机中仅在 index.html 文件中使用 JavaScript 读取 JSON 文件。我的 JSON 文件是 feed.json，如下所示。

feed.json

// API callback
readFile({
    "version": "1.0",
    "encoding": "UTF-8",
    "feed": {
        "xmlns": "http://www.w3.org/2005/Atom",
        "xmlns$openSearch": "http://a9.com/-/spec/opensearchrss/1.0/",
        "xmlns$blogger": "http://schemas.google.com/blogger/2008",
        "xmlns$georss": "http://www.georss.org/georss",
        "xmlns$gd": "http://schemas.google.com/g/2005",
        "xmlns$thr": "http://purl.org/syndication/thread/1.0",
        "title": {
            "$t": "Title Of A Feed"
        },
        "id": {
            "$t": "ID Of The Feed"
        }
    }
});

我正在使用我在 index.html 文件中的 </body> 标记之前添加的以下代码读取上述文件。

index.html

<script>
function readFile(json) {
    alert(json.feed.title.$t);
}
// Calling The JSON File For This Function
var s = document.createElement("script");
s.setAttribute("src","feed.json?callback=readFile");
document.body.appendChild(s);

// Again Calling The Same JSON File
function readFileAgain(json) {
    alert(json.feed.id.$t);
}
// Calling The JSON File For This Function
var s = document.createElement("script");
s.setAttribute("src","feed.json?callback=readFileAgain");
document.body.appendChild(s);
</script>

我想在同一页面的两个函数中读取此文件，但无法编辑 feed.json 文件。当我运行我上面的代码时，它只读上面的函数而不是第二个。那么怎么可能再次读取这个文件呢？

Answer 1

feed.json 实际上是一个带有单个函数调用的 JavaScript 文件：它调用 readFile() 函数，传递一个对象作为参数。所以它第一次工作，因为你已经定义了 readFile 函数。另一个 readFileAgain 已定义但从未调用。

您可以在第一次读取时将文件中的数据分配给全局变量，然后在需要时使用它：

function readFile(json) {
    window.feedjson = json;
}

var s = document.createElement("script");
s.setAttribute("src","feed.json");
document.body.appendChild(s);

现在数据在全球范围内可用 feedjson，因此您可以使用它：

function getFeedTitle( data ){
    alert(data.feed.title.$t);
}

function getFeedId( data ){
    alert(data.feed.id.$t);
}

getFeedTitle( feedjson );
getFeedId( feedjson );

Answer 2

它是 jsonp 而不是 json 因为你可以看到你在 feed.json 中有一个包装器 js 函数：

readFile({......})
//^^^^^^^--------^----you can see this is a function name readFile

如您所见，readFile 应该在加载后调用或作为回调调用，因此在第一种情况下它是运行，因为回调与函数名称匹配。而在第二个中，回调与函数名称不匹配，它们是不同的。

第二个：

readFile != readFileAgain // so it never gets executed.

所以，我建议您使用 localStorage：

function readFile(json) {
    if(window.localStorage && !localStorage.getItem['data']){
       localStorage.setItem('data', json); // <-----set it first here
    }
    alert(json.feed.title.$t);
}
// Calling The JSON File For This Function
var s = document.createElement("script");
s.setAttribute("src","feed.json?callback=readFile");
document.body.appendChild(s);

// Again Calling The Same JSON File
function readFileAgain() {
    var json = '';
    if(window.localStorage && localStorage.getItem['data']){
      json = JSON.parse(localStorage.getItem['data']); // <------------now get it here.
    }
    alert(json.feed.id.$t);
}
// Calling The JSON File For This Function
var s = document.createElement("script");
s.setAttribute("src","feed.json?callback=readFileAgain");
document.body.appendChild(s);

Answer 3

我试图找出解决方案，但得到了以下解决方案。它现在工作完美。通过这个我可以使用单个回调无限的功能...

index.html

<script>
function readFile(json) {
    readFileAgain(json);
    readFileAgainAgain(json);
}
// Calling The JSON File For This Function
var s = document.createElement("script");
s.setAttribute("src","feed.json?callback=readFile");
document.body.appendChild(s);

// Again Calling The Same JSON File
function readFileAgain(json) {
    alert(json.feed.title.$t);
}
function readFileAgainAgain(json) {
    alert(json.feed.id.$t);
}
</script>

本地存储

其他进程正在使用 HTML5 本地存储。它也经过测试和工作。您也可以在这里自由使用您的 JSON 无限时间...

<script style='text/javascript'>
function savePostsJSON(json) {
    if(window.localStorage){
        localStorage.setItem('JSONdata', JSON.stringify(json));
    } else {
        alert("Your Browser Doesn't Suppoet LocalStorage.");
    }
}
var s = document.createElement("script");
s.setAttribute("src","http://www.guitricks.com/feeds/posts/default/?redirect=false&orderby=published&alt=json&max-results=500&callback=savePostsJSON");
document.body.appendChild(s);
function readFile1() {
    var json = JSON.parse(localStorage.getItem("JSONdata"));
    alert(json.feed.id.$t);
}
function readFile2() {
    var json = JSON.parse(localStorage.getItem("JSONdata"));
    alert(json.feed.title.$t);
}
readFile1();
readFile2();
</script>

如何使用 JavaScript 离线阅读 JSON 文件？

How To Read JSON File Offline Using JavaScript?

html

javascript

jquery

json

javascript-objects

feed.json

index.html

index.html

本地存储