我试图加载一个本地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与闭包库:
goog.net.XhrIo.send('../appData.json', function(evt) {
var xhr = evt.target;
var obj = xhr.getResponseJson(); //JSON parsed as Javascript object
console.log(obj);
});
我也有同样的需求(测试我的angularjs应用程序)，我发现唯一的方法是使用require.js:
var json = require('./data.json'); //(with path)
注意:文件只加载一次，以后的调用将使用缓存。
关于使用nodejs读取文件的更多信息:http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs
require.js: http://requirejs.org/
如果您正在寻找一些快速和肮脏的东西，只需加载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'};
function readTextFile(srcfile) {
try { //this is for IE
var fso = new ActiveXObject("Scripting.FileSystemObject");;
if (fso.FileExists(srcfile)) {
var fileReader = fso.OpenTextFile(srcfile, 1);
var line = fileReader.ReadLine();
var jsonOutput = JSON.parse(line);
}
} catch (e) {
}
}
readTextFile("C:\\Users\\someuser\\json.txt");
我所做的是，首先，从network选项卡，记录服务的网络流量，从响应体，复制并保存json对象到本地文件中。然后用本地文件名调用函数，你应该能够在上面的jsonOutout中看到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
