Question

如何在 JavaScript 中读取外部本地 JSON 文件？

2013-10-31

1738434

javascript json

我在本地系统中保存了一个 JSON 文件，并创建了一个 JavaScript 文件，以便读取 JSON 文件并打印数据。这是 JSON 文件：

{"resource":"A","literals":["B","C","D"]}

假设这是 JSON 文件的路径： /Users/Documents/workspace/test.json 。

有人可以帮我写一段简单的代码来读取 JSON 文件并用 JavaScript 打印数据吗？

Answer 1

要使用 javascript 读取外部本地 JSON 文件 (data.json)，首先创建 data.json 文件：

data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';

然后，

在脚本源中提及 json 文件的路径以及 javascript 文件

 <script type="text/javascript" src="data.json"></script>
<script type="text/javascript" src="javascript.js"></script>

从 json 文件中获取对象

 var mydata = JSON.parse(data);
alert(mydata[0].name);
alert(mydata[0].age);
alert(mydata[1].name);
alert(mydata[1].age);

Answer 2

从硬盘加载 .json 文件是一个异步操作，因此需要指定在文件加载后执行的回调函数。

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//usage:
readTextFile("/Users/Documents/workspace/test.json", function(text){
    var data = JSON.parse(text);
    console.log(data);
});

此函数还适用于加载 .html 或 .txt 文件，通过将 mime 类型参数覆盖为 "text/html" 、 "text/plain" 等。

Answer 3

由于请求是使用 HTTP 发出的，因此您无法对本地资源进行 AJAX 调用。

一种解决方法是运行本地 Web 服务器，提供文件并对本地主机进行 AJAX 调用。

为了帮助您编写代码来读取 JSON，您应该阅读 jQuery.getJSON() 的文档：

http://api.jquery.com/jQuery.getJSON/