我已经在我的本地系统中保存了一个JSON文件，并创建了一个JavaScript文件，以便读取JSON文件并打印数据。以下是JSON文件:
{"resource":"A","literals":["B","C","D"]}
假设这是JSON文件的路径:/Users/Documents/workspace/test.json。
谁能帮我写一段简单的代码来读取JSON文件并用JavaScript打印数据?
当前回答
我喜欢上面Stano/Meetar的评论。我用它来读取.json文件。 我使用Promise扩展了他们的例子。 这是同样的活塞。 https://plnkr.co/edit/PaNhe1XizWZ7C0r3ZVQx?p=preview
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("DATA.json", function(text){
// var data = JSON.parse(text);
// console.log(data);
// });
var task1 = function (){
return new Promise (function(resolve, reject){
readTextFile("DATA.json", function(text){
var data = JSON.parse(text);
console.log('task1 called');
console.log(data);
resolve('task1 came back');
});
});
};
var task2 = function (){
return new Promise (function(resolve, reject){
readTextFile("DATA2.json", function(text){
var data2 = JSON.parse(text);
console.log('task2 called');
console.log(data2);
resolve('task2 came back');
});
});
}
Promise.race([task1(), task2()])
.then(function(fromResolve){
console.log(fromResolve);
});
JSON的读取可以移动到另一个函数，对于DRY;但这里的例子更多的是展示如何使用承诺。
其他回答
取决于您的浏览器，您可以访问您的本地文件。但这可能并不适用于应用程序的所有用户。
要做到这一点，您可以尝试这里的说明:http://www.html5rocks.com/en/tutorials/file/dndfiles/
一旦你的文件加载，你可以检索数据使用:
var jsonData = JSON.parse(theTextContentOfMyFile);
您可以使用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获取数据。
既然你有一个web应用程序，你可能有一个客户端和一个服务器。
如果您只有浏览器，并且希望从浏览器中运行的javascript读取本地文件，这意味着您只有客户端。出于安全原因，浏览器不应该允许您这样做。
然而，正如lauhub上面解释的那样，这似乎是有效的:
http://www.html5rocks.com/en/tutorials/file/dndfiles/
另一个解决方案是在你机器的某个地方设置一个web服务器(在windows中很小，在linux中很小)，并使用XMLHttpRequest或D3库，从服务器请求文件并读取它。服务器将从本地文件系统获取文件，并通过web将其提供给您。
使用jQuery和ajax可以很好地读取JSON文件和操作数据
$(document).ready(function () {
$.ajax({
url: 'country.json',
type: 'GET',
dataType: 'json',
success: function (code, statut) {
for (let i in code) {
console.log(i)
}
}
});
});
只需使用$。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)
}
})
});
