我试图加载一个本地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的控制台中，它可以工作，我可以访问数据。
有人有办法吗?
当前回答
我如何能够加载数据从json文件在一个JavaScript变量使用简单的JavaScript:
let mydata;
fetch('datafile.json')
.then(response => response.json())
.then(jsonResponse => mydata = jsonResponse)
在这里发帖是因为我没有找到我正在寻找的这种“解决方案”。
注意:我使用的是通过通常的“python -m http”运行的本地服务器。服务器”命令。
其他回答
在一个更现代的方式，你现在可以使用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
美元。getJSON是异步的，所以你应该这样做:
$.getJSON("test.json", function(json) {
console.log(json); // this will show the info it in firebug console
});
$.ajax({
url: "Scripts/testingJSON.json",
//force to handle it as text
dataType: "text",
success: function (dataTest) {
//data downloaded so we call parseJSON function
//and pass downloaded data
var json = $.parseJSON(dataTest);
//now json variable contains data in json format
//let's display a few items
$.each(json, function (i, jsonObjectList) {
for (var index = 0; index < jsonObjectList.listValue_.length;index++) {
alert(jsonObjectList.listKey_[index][0] + " -- " + jsonObjectList.listValue_[index].description_);
}
});
}
});
从头开始添加到JSON文件中
var object1 = [
在最后
]
保存它
然后用纯js加载它
<script type="text/javascript" src="1.json"></script>
现在你可以使用它作为object1 -它已经加载!
完美的工作在Chrome和没有任何额外的库
美元。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
