我已经在我的本地系统中保存了一个JSON文件，并创建了一个JavaScript文件，以便读取JSON文件并打印数据。以下是JSON文件:
{"resource":"A","literals":["B","C","D"]}
假设这是JSON文件的路径:/Users/Documents/workspace/test.json。
谁能帮我写一段简单的代码来读取JSON文件并用JavaScript打印数据?
当前回答
只需使用$。getJSON和$。迭代Key /value对。 JSON文件和函数代码的内容示例:
{
{
"key": "INFO",
"value": "This is an example."
}
}
var url = "file.json";
$.getJSON(url, function (data) {
$.each(data, function (key, model) {
if (model.key == "INFO") {
console.log(model.value)
}
})
});
其他回答
将JSON文件转换为.js文件，并将JSON分配给一个变量或const，然后在你的主javascript文件中引用它。
您可以使用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获取数据。
您必须创建一个新的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);
});
如果你能运行本地web服务器(就像Chris P上面建议的那样)，如果你能使用jQuery，你可以试试http://api.jquery.com/jQuery.getJSON/
您不能对本地资源进行AJAX调用，因为请求是使用HTTP发出的。
一个解决方案是运行一个本地web服务器，提供文件并对localhost进行AJAX调用。
为了帮助你编写代码来读取JSON，你应该阅读jQuery.getJSON()的文档:
http://api.jquery.com/jQuery.getJSON/
