加载本地JSON文件

我试图加载一个本地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的本地数组-正如您在问题(test.json)中的示例中所示，那么您可以使用JQuery的parseJSON()方法->

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

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

从头开始添加到JSON文件中

var object1 = [

在最后

保存它

然后用纯js加载它

<script type="text/javascript" src="1.json"></script>

现在你可以使用它作为object1 -它已经加载!

完美的工作在Chrome和没有任何额外的库

最近D3js能够处理本地json文件。

这就是问题所在 https://github.com/mbostock/d3/issues/673

这是D3与本地json文件一起工作的补丁。 https://github.com/mbostock/d3/pull/632

最简单的方法:保存json文件为*.js，并包括到HTML模板作为脚本。

Js文件是这样的:

let fileJsonData = {
  someField: someValue,
  ...
}

包括如下内容:

...
<script src="./js/jsonData.js"></script>
...

include之后，你可以在全局范围内调用fileJsonData。

在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

推荐文章