我在本地系统中保存了一个 JSON 文件并创建了一个 JavaScript 文件，以便读取 JSON 文件并打印出数据。这是 JSON 文件：
{"resource":"A","literals":["B","C","D"]}
比方说，这是JSON文件的路径：/Users/Documents/workspace/test.json。
谁能帮我写一段简单的代码来读取 JSON 文件并用 JavaScript 打印数据？
如何在 JavaScript 中读取外部本地 JSON 文件？
IT技术
javascript
json
2021-01-19 10:02:38
6个回答
要使用 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="javascrip.js"></script>从json文件中获取对象
var mydata = JSON.parse(data); alert(mydata[0].name); alert(mydata[0].age); alert(mydata[1].name); alert(mydata[1].age);
有关详细信息，请参阅此参考。
.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"等等。
您不能对本地资源进行 AJAX 调用，因为该请求是使用 HTTP 发出的。
一种解决方法是运行本地网络服务器，提供文件并对本地主机进行 AJAX 调用。
在帮助您编写代码来读取 JSON 方面，您应该阅读以下文档jQuery.getJSON()：
当在Node.js的，或在浏览器中使用require.js时，你可以简单地做：
let json = require('/Users/Documents/workspace/test.json');
console.log(json, 'the json obj');
请注意：文件加载一次，后续调用将使用缓存。
使用Fetch API是最简单的解决方案：
fetch("test.json")
.then(response => response.json())
.then(json => console.log(json));
它在 Firefox 中完美运行，但在 Chrome 中您必须自定义安全设置。