我试图加载一个本地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的控制台中,它可以工作,我可以访问数据。

有人有办法吗?


当前回答

在TypeScript中,你可以使用import来加载本地JSON文件。例如,加载一个font.json:

import * as fontJson from '../../public/fonts/font_name.json';

这需要tsconfig标志——resolveJsonModule:

// tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "resolveJsonModule": true,
        "esModuleInterop": true
    }
}

有关更多信息,请参阅typescript的发布说明:https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

其他回答

我只是稍微编辑了一下JSON文件。

myfile。Json => myfile.js

在JSON文件中,(将其设置为JS变量)

{name: "Whatever"} => var x = {name: "Whatever"}

最后,

导出默认x;

然后,

导入JsonObj from './myfile.js';

如果您正在使用JSON的本地数组-正如您在问题(test.json)中的示例中所示,那么您可以使用JQuery的parseJSON()方法->

var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );

getJSON()用于从远程站点获取JSON -它不会在本地工作(除非您使用本地HTTP服务器)

美元。getJSON是异步的,所以你应该这样做:

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});

在一个更现代的方式,你现在可以使用Fetch API:

fetch("test.json")
  .then(response => response.json())
  .then(json => console.log(json));

所有现代浏览器都支持Fetch API。(Internet Explorer没有,但Edge有!)

或者使用async/await

async function printJSON() {
    const response = await fetch("test.json");
    const json = await response.json();
    console.log(json);
}

来源:

使用取回 正在执行的取回 我能用…吗? 如何使用Fetch与async/await

在angular(或任何其他框架)中,你可以使用http get来加载 我是这样使用它的:

this.http.get(<path_to_your_json_file))
 .success((data) => console.log(data));

希望这能有所帮助。