我已经在我的本地系统中保存了一个JSON文件，并创建了一个JavaScript文件，以便读取JSON文件并打印数据。以下是JSON文件:
{"resource":"A","literals":["B","C","D"]}
假设这是JSON文件的路径:/Users/Documents/workspace/test.json。
谁能帮我写一段简单的代码来读取JSON文件并用JavaScript打印数据?
当前回答
使用Fetch API是最简单的解决方案:
fetch("test.json")
.then(response => response.json())
.then(json => console.log(json));
它在Firefox中工作完美，但在Chrome中你必须自定义安全设置。
其他回答
2021解决方案(适用于Chrome 91+)
导入JSON文件的JS文件应该是一个模块:
<script type=“module” src=“script.js”></script>
然后在script.js中导入json文件:
从"./data "导入数据。Json: assert {type: " Json "};
您可以使用console.log(data)检查数据是否已加载
源
您可以使用D3来处理回调，并加载本地JSON文件数据。Json，如下所示:
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
d3.json("data.json", function(error, data) {
if (error)
throw error;
console.log(data);
});
</script>
从硬盘加载.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
})
非常简单。 将json文件重命名为“.js”而不是“.json”。
<script type="text/javascript" src="my_json.js"></script>
所以正常地遵循你的代码。
<script type="text/javascript">
var obj = JSON.parse(contacts);
然而，只是为了信息，我的json内容看起来像下面的剪辑。
contacts='[{"name":"bla bla", "email":bla bla, "address":"bla bla"}]';
