我已经在我的本地系统中保存了一个JSON文件，并创建了一个JavaScript文件，以便读取JSON文件并打印数据。以下是JSON文件:
{"resource":"A","literals":["B","C","D"]}
假设这是JSON文件的路径:/Users/Documents/workspace/test.json。
谁能帮我写一段简单的代码来读取JSON文件并用JavaScript打印数据?
当前回答
如果你能运行本地web服务器(就像Chris P上面建议的那样)，如果你能使用jQuery，你可以试试http://api.jquery.com/jQuery.getJSON/
其他回答
使用Fetch API是最简单的解决方案:
fetch("test.json")
.then(response => response.json())
.then(json => console.log(json));
它在Firefox中工作完美，但在Chrome中你必须自定义安全设置。
您必须创建一个新的XMLHttpRequest实例并加载json文件的内容。
这个技巧对我很有用(https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript):)
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'my_data.json', true); // Replace 'my_data' with the path to your file
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
// Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
callback(xobj.responseText);
}
};
xobj.send(null);
}
loadJSON(function(response) {
// Parse JSON string into object
var actual_JSON = JSON.parse(response);
});
2021解决方案(适用于Chrome 91+)
导入JSON文件的JS文件应该是一个模块:
<script type=“module” src=“script.js”></script>
然后在script.js中导入json文件:
从"./data "导入数据。Json: assert {type: " Json "};
您可以使用console.log(data)检查数据是否已加载
源
如果你使用本地文件，为什么不把数据打包成一个js对象呢?
data.js
MyData = { resource:"A",literals:["B","C","D"]}
没有xmlhttprequest，没有解析，只使用MyData。资源直接
您可以使用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
})
