我已经在我的本地系统中保存了一个JSON文件，并创建了一个JavaScript文件，以便读取JSON文件并打印数据。以下是JSON文件:
{"resource":"A","literals":["B","C","D"]}
假设这是JSON文件的路径:/Users/Documents/workspace/test.json。
谁能帮我写一段简单的代码来读取JSON文件并用JavaScript打印数据?
当前回答
从硬盘加载.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"等。
其他回答
您可以使用d3.js导入JSON文件。在你的html主体上调用d3:
<script src="https://d3js.org/d3.v5.min.js"></script>
然后把这个放在你的js脚本上:
d3.json("test.json").then(function(data_json) {
//do your stuff
})
正如许多人之前提到的，使用AJAX调用这是行不通的。然而，有一种方法可以绕过它。使用input元素，可以选择您的文件。
所选文件(.json)需要有这样的结构:
[
{"key": "value"},
{"key2": "value2"},
...
{"keyn": "valuen"},
]
<input type="file" id="get_the_file">
然后你可以使用FileReader()使用JS读取文件:
document.getElementById("get_the_file").addEventListener("change", function() {
var file_to_read = document.getElementById("get_the_file").files[0];
var fileread = new FileReader();
fileread.onload = function(e) {
var content = e.target.result;
// console.log(content);
var intern = JSON.parse(content); // Array of Objects.
console.log(intern); // You can index every object
};
fileread.readAsText(file_to_read);
});
您不能对本地资源进行AJAX调用，因为请求是使用HTTP发出的。
一个解决方案是运行一个本地web服务器，提供文件并对localhost进行AJAX调用。
为了帮助你编写代码来读取JSON，你应该阅读jQuery.getJSON()的文档:
http://api.jquery.com/jQuery.getJSON/
您可以使用fetch()在async await的帮助下完成此操作。这是从url获取数据的最新和最安全的方式。
const url = "../asset/videoData.json";
const fetchJson = async () => {
try {
const data = await fetch(url);
const response = await data.json();
} catch (error) {
console.log(error);
}
};
你也可以使用它从外部url获取数据。
你可以像ES6模块一样导入它;
import data from "/Users/Documents/workspace/test.json"
