我试图加载一个本地JSON文件，但它不会工作。下面是我的JavaScript代码(使用jQuery):
var json = $.getJSON("test.json");
var data = eval("(" +json.responseText + ")");
document.write(data["a"]);
测试。json文件:
{"a" : "b", "c" : "d"}
什么也没有显示，Firebug告诉我数据是未定义的。在Firebug中我可以看到json。responseText和它是好的和有效的，但它是奇怪的，当我复制一行:
var data = eval("(" +json.responseText + ")");
在Firebug的控制台中，它可以工作，我可以访问数据。
有人有办法吗?
当前回答
在一个更现代的方式，你现在可以使用Fetch API:
fetch("test.json")
.then(response => response.json())
.then(json => console.log(json));
所有现代浏览器都支持Fetch API。(Internet Explorer没有，但Edge有!)
或者使用async/await
async function printJSON() {
const response = await fetch("test.json");
const json = await response.json();
console.log(json);
}
来源:
使用取回 正在执行的取回 我能用…吗? 如何使用Fetch与async/await
其他回答
如果您正在使用JSON的本地数组-正如您在问题(test.json)中的示例中所示，那么您可以使用JQuery的parseJSON()方法->
var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );
getJSON()用于从远程站点获取JSON -它不会在本地工作(除非您使用本地HTTP服务器)
最简单的方法:保存json文件为*.js，并包括到HTML模板作为脚本。
Js文件是这样的:
let fileJsonData = {
someField: someValue,
...
}
包括如下内容:
...
<script src="./js/jsonData.js"></script>
...
include之后，你可以在全局范围内调用fileJsonData。
美元。getJSON只适用于我在Chrome 105.0.5195.125使用等待，这是一个脚本类型的模块。
<script type="module">
const myObject = await $.getJSON('./myObject.json');
console.log('myObject: ' + myObject);
</script>
无须等待，我看到:
Uncaught TypeError: myObject is not iterable
当解析myObject时。
没有type="module"我看到:
Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules
如果您想让用户选择本地json文件(文件系统上的任何位置)，那么下面的解决方案是可行的。
它使用FileReader和JSON。解析器(没有jquery)。
<html>
<body>
<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">
<fieldset>
<h2>Json File</h2>
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
</fieldset>
</form>
<script type="text/javascript">
function loadFile() {
var input, file, fr;
if (typeof window.FileReader !== 'function') {
alert("The file API isn't supported on this browser yet.");
return;
}
input = document.getElementById('fileinput');
if (!input) {
alert("Um, couldn't find the fileinput element.");
}
else if (!input.files) {
alert("This browser doesn't seem to support the `files` property of file inputs.");
}
else if (!input.files[0]) {
alert("Please select a file before clicking 'Load'");
}
else {
file = input.files[0];
fr = new FileReader();
fr.onload = receivedText;
fr.readAsText(file);
}
function receivedText(e) {
let lines = e.target.result;
var newArr = JSON.parse(lines);
}
}
</script>
</body>
</html>
这里有一个很好的FileReader介绍:http://www.html5rocks.com/en/tutorials/file/dndfiles/
在angular(或任何其他框架)中，你可以使用http get来加载 我是这样使用它的:
this.http.get(<path_to_your_json_file))
.success((data) => console.log(data));
希望这能有所帮助。
