如何将 JSON 文件导入到 TypeScript 文件中？

我正在构建一个地图应用程序使用角度地图，并希望导入一个 JSON 文件作为一个标记定义位置的列表。我希望使用这个 JSON 文件作为 app.Component. ts 中的标记[]数组。而不是在 TypeScript 文件中定义硬编码的标记数组。

导入这个 JSON 文件在我的项目中使用的最佳过程是什么? 非常感谢任何方向！

191401 次浏览
小开

第一个解决方案 -只需更改您的。Json 文件到。Ts 并在文件开头添加 export default，如下所示:

export default {
property: value;
}

然后你可以简单地导入文件而不需要添加类型，像这样:

import data from 'data';

第二个解决方案 通过 HttpClient 获取 json。

向组件中注入 HttpClient，如下所示:

export class AppComponent  {
constructor(public http: HttpClient) {}
}

然后用这个代码:

this.http.get('/your.json').subscribe(data => {
this.results = data;
});

Https://angular.io/guide/http

与这里提供的其他解决方案相比，这个解决方案有一个明显的优势 ——如果您的 json 将发生变化，它不需要您重新构建整个应用程序(它是从一个单独的文件动态加载的，因此您只能修改该文件)。

小开 
let fs = require('fs');
let markers;
fs.readFile('./markers.json', handleJSONFile);


var handleJSONFile = function (err, data) {
if (err) {
throw err;
}
markers= JSON.parse(data);
}
小开

多亏了这些输入家伙，我才能找到修复程序，我在 app.Component. ts 文件的顶部添加并定义了 json:

var json = require('./[yourFileNameHere].json');

这最终产生了标记，并且是一行简单的代码。

小开
最佳答案

直到最近的一次打字稿更新，奥尼帕坦的俏皮话一直在为我工作。

我发现 Jecelyn Yeen 的 邮寄建议张贴这个片段到你的 TS 定义文件

将文件 typings.d.ts添加到项目的根文件夹，内容如下

declare module "*.json" {
const value: any;
export default value;
}

然后像这样导入你的数据:

import * as data from './example.json';

更新日期: 2019年7月:

类型脚本2.9(医生)提供了一个更好、更智能的解决方案。步骤:

  1. 在 tsconfig.json文件中用这一行添加对 resolveJsonModule的支持:
"compilerOptions": {
...
"resolveJsonModule": true
}

Import 语句现在可以假定默认导出:

import data from './example.json';

现在，intellisense 将检查 json 文件，看看是否可以使用 Array 等方法。

小开

以下是基于@ryanrain 的 Angular 6 + 的完整答案:

在 角-斜面文档角-斜面文档中，json 可以被视为资产，可以在不使用 ajax 请求的情况下从标准导入访问。

假设您将 json 文件添加到“ your-json-dir”目录:

  1. 将“ your-json-dir”添加到 angular.json 文件(:

    「资产」 : “ src/asset” “ src/your-json-dir” ]

  2. 创建或编辑 typeings.d.ts 文件(在项目根目录下) ，并添加以下内容:

    声明模块“ * . json”{ Const 值: any; 出口默认值; }

    这将允许导入“ . json”模块，而不会出现打印错误。

  3. 在您的控制器/服务/任何其他文件中，只需使用这个相对路径导入该文件:

    import * as myJson from 'your-json-dir/your-json-file.json';

小开

在 angular7中，我简单地使用

let routesObject = require('./routes.json');

Json 文件如下所示

{


"routeEmployeeList":    "employee-list",
"routeEmployeeDetail":      "employee/:id"
}

您可以使用

routesObject.routeEmployeeList
小开

对于角度7 + ,

1)添加一个文件“ typeings.d.ts”到项目的根文件夹(例如，src/typeings.d.ts) :

declare module "*.json" {
const value: any;
export default value;
}

2)汇入及存取 JSON 资料:

import * as data from 'path/to/jsonData/example.json';
...
export class ExampleComponent {
constructor() {
console.log(data.default);
}


}

或:

import data from 'path/to/jsonData/example.json';
...
export class ExampleComponent {
constructor() {
console.log(data);
}


}
小开

我读了一些回复，但它们似乎对我不起作用。我正在使用类型脚本2.9.2，角度6和尝试导入 JSON 在一个 Jasmine 单元测试。这就是我的秘诀。

地址:

"resolveJsonModule": true,

到 tsconfig.json

输入类似:

import * as nameOfJson from 'path/to/file.json';

停止 ng test，重新开始。

参考资料: https://blogs.msdn.microsoft.com/typescript/2018/05/31/announcing-typescript-2-9/#json-imports

小开

就 打字稿2.9而言，人们可以简单地添加:

"compilerOptions": {
"resolveJsonModule": true
}

到 tsconfig.json。此后，很容易使用 json 文件(还有在 VSCode 中也会有很好的类型推断) :

返回文章页面

{
"cases": [
{
"foo": "bar"
}
]
}

在你的打字稿文件中:

import { cases } from './data.json';

小开

如 这个 Reddit 帖子所述，在角度7之后，你可以将事情简化为以下两个步骤:

  1. 将这三行添加到 tsconfig.json文件中的 compilerOptions:
"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
  1. 导入 json 数据:
import myData from '../assets/data/my-data.json';

就是这样，您现在可以在组件/服务中使用 myData。

小开

角度10

您现在应该改为编辑 tsconfig.app.json(注意名称中的 “应用程序”)文件。

在那里您将找到 compilerOptions，并且您只需添加 resolveJsonModule: true。

因此，例如，一个全新项目中的文件应该是这样的:

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.base.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": [],
"resolveJsonModule": true
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
小开

我无法导入另一个文件 json 也是。 但我就这么解决了

const swaggerDoc = require('../swagger.json')

提交答案