我试图加载一个本地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的控制台中，它可以工作，我可以访问数据。
有人有办法吗?
当前回答
最近D3js能够处理本地json文件。
这就是问题所在 https://github.com/mbostock/d3/issues/673
这是D3与本地json文件一起工作的补丁。 https://github.com/mbostock/d3/pull/632
其他回答
我不敢相信有多少次这个问题在没有理解和/或用原始海报的实际代码解决问题的情况下被回答了。也就是说，我自己是一个初学者(只有2个月的编码)。我的代码确实工作得很完美，但请随意提出任何更改建议。下面是解决方案:
//include the 'async':false parameter or the object data won't get captured when loading
var json = $.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false});
//The next line of code will filter out all the unwanted data from the object.
json = JSON.parse(json.responseText);
//You can now access the json variable's object data like this json.a and json.c
document.write(json.a);
console.log(json);
下面是我上面提供的相同代码的一种更短的方式:
var json = JSON.parse($.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);
你也可以使用$。用Ajax代替$。getJSON以完全相同的方式编写代码:
var json = JSON.parse($.ajax({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);
最后，最后一种方法是对$进行换行。函数中的Ajax。这不是我的功劳，但我确实做了一些修改。我测试了它，它工作并产生与上面的代码相同的结果。我在这里找到了这个解决方案——>加载json到变量
var json = function () {
var jsonTemp = null;
$.ajax({
'async': false,
'url': "http://spoonertuner.com/projects/test/test.json",
'success': function (data) {
jsonTemp = data;
}
});
return jsonTemp;
}();
document.write(json.a);
console.log(json);
测试。你在上面的代码中看到的Json文件托管在我的服务器上，包含相同的Json数据对象，他(原始海报)已经发布。
{
"a" : "b",
"c" : "d"
}
从头开始添加到JSON文件中
var object1 = [
在最后
]
保存它
然后用纯js加载它
<script type="text/javascript" src="1.json"></script>
现在你可以使用它作为object1 -它已经加载!
完美的工作在Chrome和没有任何额外的库
我很惊讶从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
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对象。
美元。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
