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

有人有办法吗?

当前回答

我也有同样的需求(测试我的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_str = 字符串.raw'[{“名称”： “Jeeva”}， {“名称”： “Kumar”}]'; obj = JSON.parse（json_str）; console.log（obj[0][“name”]）;

我为我的cordova应用程序这样做，就像我为JSON创建了一个新的javascript文件，并将JSON数据粘贴到String中。然后使用JSON.parse解析它

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

myfile。Json => myfile.js

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

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

最后，

导出默认x;

然后,

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

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

Js文件是这样的:

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

包括如下内容:

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

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

我很惊讶从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

在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

推荐文章