我试图加载一个本地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”运行的本地服务器。服务器”命令。
其他回答
你可以把json放在javascript文件中。这可以使用jQuery的getScript()函数在本地加载(甚至在Chrome中)。
图- 01. - js文件:
var json = '{"layers":6, "worldWidth":500, "worldHeight":400}'
main.js
$.getScript('map-01.js')
.done(function (script, textStatus) {
var map = JSON.parse(json); //json is declared in the js file
console.log("world width: " + map.worldWidth);
drawMap(map);
})
.fail(function (jqxhr, settings, exception) {
console.log("error loading map: " + exception);
});
输出:
world width: 500
注意，json变量是在js文件中声明和赋值的。
我只是稍微编辑了一下JSON文件。
myfile。Json => myfile.js
在JSON文件中，(将其设置为JS变量)
{name: "Whatever"} => var x = {name: "Whatever"}
最后，
导出默认x;
然后,
导入JsonObj from './myfile.js';
美元。getJSON是异步的，所以你应该这样做:
$.getJSON("test.json", function(json) {
console.log(json); // this will show the info it in firebug console
});
如果您正在寻找一些快速和肮脏的东西，只需加载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'};
我很惊讶从es6导入没有提到(使用小文件)
从“。/test.json”导入测试
Webpack 2<使用json加载器作为.json文件的默认值。
https://webpack.js.org/guides/migrating/#json-loader-is-not-required-anymore
打字稿:
import test from 'json-loader!./test.json';
TS2307 (TS)无法找到模块“json-loader!./suburbs.json”
为了让它工作，我必须首先声明模块。我希望这能为某人节省几个小时的时间。
declare module "json-loader!*" {
let json: any;
export default json;
}
...
import test from 'json-loader!./test.json';
如果我试图从json-loader中忽略loader，我从webpack中得到以下错误:
突破性变化:不再允许省略'-loader'后缀 当使用加载器时。 你需要指定'json-loader'而不是'json'， 看到https://webpack.js.org/guides/migrating/ automatic-loader-module-name-extension-removed
