我已经在我的本地系统中保存了一个JSON文件，并创建了一个JavaScript文件，以便读取JSON文件并打印数据。以下是JSON文件:
{"resource":"A","literals":["B","C","D"]}
假设这是JSON文件的路径:/Users/Documents/workspace/test.json。
谁能帮我写一段简单的代码来读取JSON文件并用JavaScript打印数据?
当前回答
我接受了斯塔诺精彩的回答，并把它包装成一个承诺。如果你没有像node或webpack这样的选项来从文件系统加载json文件，这可能会很有用:
// wrapped XMLHttpRequest in a promise
const readFileP = (file, options = {method:'get'}) =>
new Promise((resolve, reject) => {
let request = new XMLHttpRequest();
request.onload = resolve;
request.onerror = reject;
request.overrideMimeType("application/json");
request.open(options.method, file, true);
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === "200") {
resolve(request.responseText);
}
};
request.send(null);
});
你可以这样调用它:
readFileP('<path to file>')
.then(d => {
'<do something with the response data in d.srcElement.response>'
});
其他回答
当在Node.js中或在浏览器中使用require.js时，你可以简单地做:
let json = require('/Users/Documents/workspace/test.json');
console.log(json, 'the json obj');
注意:文件加载一次，后续调用将使用缓存。
你可以像ES6模块一样导入它;
import data from "/Users/Documents/workspace/test.json"
上面提到的所有解决方案只有在本地主机上运行本地web服务器时才有效。如果你想要在没有web服务器的情况下实现这一点，你可能需要通过使用文件上传控制来手动上传JSON文件。由于安全风险，如果没有本地服务器，浏览器将不提供此功能。
你也可以在没有本地服务器的情况下解析上传的文件。这里是示例代码，我已经实现了一个解决类似的问题。
<div id="content">
<input type="file" name="inputfile" id="inputfile">
<br>
<h2>
<pre id="output"></pre>
</h2>
</div>
<script type="text/javascript">
document.getElementById('inputfile')
.addEventListener('change', function () {
let fileReader = new FileReader();
fileReader.onload = function () {
let parsedJSON = JSON.parse(fileReader.result);
console.log(parsedJSON);
// your code to consume the json
}
fileReader.readAsText(this.files[0]);
})
</script>
在我的情况下，我想读取一个本地JSON文件，并在桌面上的html文件中显示它，这就是我所要做的。
注意:不要尝试使用JavaScript自动上传文件，由于浏览器施加的安全限制，即使这样做也是不允许的。
您不能对本地资源进行AJAX调用，因为请求是使用HTTP发出的。
一个解决方案是运行一个本地web服务器，提供文件并对localhost进行AJAX调用。
为了帮助你编写代码来读取JSON，你应该阅读jQuery.getJSON()的文档:
http://api.jquery.com/jQuery.getJSON/
非常简单。 将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"}]';
