我试图加载一个本地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的控制台中，它可以工作，我可以访问数据。
有人有办法吗?
当前回答
如果您正在寻找一些快速和肮脏的东西，只需加载HTML文档头部的数据。
data.js
var DATA = {"a" : "b", "c" : "d"};
index . html
<html>
<head>
<script src="data.js" ></script>
<script src="main.js" ></script>
</head>
...
</html>
main.js
(function(){
console.log(DATA); // {"a" : "b", "c" : "d"}
})();
我应该提到，你的堆大小(在Chrome)是大约4gb，所以如果你的数据大于，你应该找到另一种方法。如果你想检查另一个浏览器试试这个:
window.performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024 + " GBs"
// "4.046875 GBs"
ES6更新:
而不是使用<script>标签来加载你的数据，你可以直接在你的main.js中使用import assert加载它
import data from './data.json' assert {type: 'json'};
其他回答
从头开始添加到JSON文件中
var object1 = [
在最后
]
保存它
然后用纯js加载它
<script type="text/javascript" src="1.json"></script>
现在你可以使用它作为object1 -它已经加载!
完美的工作在Chrome和没有任何额外的库
美元。getJSON是异步的，所以你应该这样做:
$.getJSON("test.json", function(json) {
console.log(json); // this will show the info it in firebug console
});
如果您正在使用JSON的本地数组-正如您在问题(test.json)中的示例中所示，那么您可以使用JQuery的parseJSON()方法->
var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );
getJSON()用于从远程站点获取JSON -它不会在本地工作(除非您使用本地HTTP服务器)
美元。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
$.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_);
}
});
}
});
