我试图加载一个本地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文件(文件系统上的任何位置)，那么下面的解决方案是可行的。
它使用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/
其他回答
An approach I like to use is to pad/wrap the json with an object literal, and then save the file with a .jsonp file extension. This method also leaves your original json file (test.json) unaltered, as you will be working with the new jsonp file (test.jsonp) instead. The name on the wrapper can be anything, but it does need to be the same name as the callback function you use to process the jsonp. I'll use your test.json posted as an example to show the jsonp wrapper addition for the 'test.jsonp' file.
json_callback({"a" : "b", "c" : "d"});
接下来，在脚本中创建一个具有全局作用域的可重用变量，以保存返回的JSON。这将使返回的JSON数据可用于脚本中的所有其他函数，而不仅仅是回调函数。
var myJSON;
接下来是一个通过脚本注入检索json的简单函数。注意，我们不能在这里使用jQuery将脚本附加到文档头部，因为IE不支持jQuery .append方法。下面代码中注释掉的jQuery方法可以在其他支持.append方法的浏览器上运行。这是作为一个参考，以显示差异。
function getLocalJSON(json_url){
var json_script = document.createElement('script');
json_script.type = 'text/javascript';
json_script.src = json_url;
json_script.id = 'json_script';
document.getElementsByTagName('head')[0].appendChild(json_script);
// $('head')[0].append(json_script); DOES NOT WORK in IE (.append method not supported)
}
接下来是一个简短的回调函数(与jsonp包装器同名)，用于将json结果数据获取到全局变量中。
function json_callback(response){
myJSON = response; // Clone response JSON to myJSON object
$('#json_script').remove(); // Remove json_script from the document
}
json数据现在可以被脚本的任何函数使用点表示法访问。举个例子:
console.log(myJSON.a); // Outputs 'b' to console
console.log(myJSON.c); // Outputs 'd' to console
这种方法可能与你习惯看到的有点不同，但有很多优点。首先，可以使用相同的函数在本地或从服务器加载相同的jsonp文件。作为奖励，jsonp已经是跨域友好的格式，也可以很容易地与REST类型API一起使用。
当然，没有错误处理函数，但为什么需要呢?如果您无法使用此方法获得json数据，那么您几乎可以打赌json本身存在一些问题，我会在一个好的json验证器上检查它。
在angular(或任何其他框架)中，你可以使用http get来加载 我是这样使用它的:
this.http.get(<path_to_your_json_file))
.success((data) => console.log(data));
希望这能有所帮助。
我也有同样的需求(测试我的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/
我没有找到任何解决方案使用谷歌的闭包库。因此，为了完成列表，未来的访问者，这里是如何从本地文件加载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);
});
如果您正在寻找一些快速和肮脏的东西，只需加载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'};
