我已经在我的本地系统中保存了一个JSON文件，并创建了一个JavaScript文件，以便读取JSON文件并打印数据。以下是JSON文件:
{"resource":"A","literals":["B","C","D"]}
假设这是JSON文件的路径:/Users/Documents/workspace/test.json。
谁能帮我写一段简单的代码来读取JSON文件并用JavaScript打印数据?
当前回答
正如许多人之前提到的，使用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);
});
其他回答
取决于您的浏览器，您可以访问您的本地文件。但这可能并不适用于应用程序的所有用户。
要做到这一点，您可以尝试这里的说明:http://www.html5rocks.com/en/tutorials/file/dndfiles/
一旦你的文件加载，你可以检索数据使用:
var jsonData = JSON.parse(theTextContentOfMyFile);
使用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)检查数据是否已加载
源
要使用javascript读取外部本地JSON文件(data. JSON)，首先要创建数据。json文件:
data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';
然后,
在脚本源代码中提到json文件和javascript文件的路径 <script type="text/javascript" src="data.json"></script> .json . <script type="text/javascript" src="javascript.js"></script> .js 从json文件中获取Object var mydata = JSON.parse(data); 警报(mydata [0] . name); alert (mydata [0] .age); 警报(mydata [1] . name); alert (mydata [1] .age);
有关更多信息，请参阅此参考资料。
使用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)
}
}
});
});
