web-dev-qa-db-ja.com

JSONファイルをTypeScriptファイルにインポートする方法は？

Angular Mapsを使用してマップアプリケーションを構築しており、場所を定義するマーカーのリストとしてJSONファイルをインポートします。このJSONファイルをapp.component.ts内のmarker []配列として使用したいと考えています。 TypeScriptファイル内にマーカーのハードコードされた配列を定義する代わりに。

プロジェクトで使用するためにこのJSONファイルをインポートする最良のプロセスは何ですか？どの方向も大歓迎です！

jsonangulargoogle-mapstypescriptmaps
36
aonepathan

Aonepathanのワンライナーは、最近のTypeScriptの更新まで私のために働いていました。

Jecelyn Yeenの post を見つけました。これは、このスニペットをTS定義ファイルに投稿することを示唆しています

ファイルtypings.d.tsをプロジェクトのルートフォルダーに以下のコンテンツとともに追加します

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

次に、次のようにデータをインポートします。

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

2019年7月の更新：

TypeScript 2.9（ docs ）は、より優れたスマートなソリューションを導入しました。手順：

  1. tsconfig.jsonファイルのこの行にresolveJsonModuleサポートを追加します。
"compilerOptions": {
    ...
    "resolveJsonModule": true
  }

importステートメントは、デフォルトのエクスポートを想定できるようになりました。

import data from './example.json';

そして、intellisenseはjsonファイルをチェックして、Arrayなどのメソッドを使用できるかどうかを確認します。かなりクール。

41
ryanrain

@ryanrainの回答に基づくAngular 6+の完全な回答は次のとおりです。

angular-cli doc から、jsonはアセットと見なされ、ajaxリクエストを使用せずに標準インポートからアクセスできます。

Jsonファイルを「your-json-dir」ディレクトリに追加するとします。

  1. 「your-json-dir」をangle.jsonファイルに追加します（：

    "assets": [ "src/assets", "src/your-json-dir" ]

  2. （プロジェクトルートで）typings.d.tsファイルを作成または編集し、次のコンテンツを追加します。

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

    これにより、TypeScriptエラーなしで「.json」モジュールをインポートできます。

  3. コントローラ/サービス/その他のファイルで、次の相対パスを使用してファイルをインポートします。

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

21
Benjamin Caure

入力者のおかげで、修正を見つけることができました。app.component.tsファイルの上にjsonを追加して定義しました。

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

これは最終的にマーカーを生成し、簡単なコード行です。

16
aonepathan

最初の解決策-.jsonファイルの拡張子を.tsに変更し、ファイルの先頭にexport defaultを追加するだけです。

export default {
   property: value;
}

次に、次のように入力を追加せずにファイルをインポートするだけです。

import data from 'data';

2番目の解決策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が変更された場合にアプリケーション全体を再構築する必要はありません（別のファイルなので、そのファイルのみを変更できます）。

13
vicbyte

私はいくつかの回答を読んでいたが、彼らは私には役に立たなかったようだ。 TypeScript 2.9.2、Angular 6を使用しており、Jasmine Unit TestでJSONをインポートしようとしています。これが私にとってのトリックでした。

追加：

"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

7
Ian Jamieson

Angular 7+の場合、

1）プロジェクトのルートフォルダーにファイル「typings.d.ts」を追加します（例：src/typings.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);
    }

}
6
Stevemaster92

Angular7では、私は単に使用しました

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

Routes.jsonファイルは次のようになります

{

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

を使用してJSONアイテムにアクセスします

routesObject.routeEmployeeList
5
Kodjo Tchioffo

TypeScript 2.9 の時点で、単純に追加できます：

"compilerOptions": {
    "resolveJsonModule": true
}

tsconfig.jsonに。その後、jsonファイルを使用するのは簡単です（andVSCodeにもNice型推論があります）：

data.json：

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

TypeScriptファイルで：

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

4
Nigel Gilbert

このredditの投稿 で述べたように、Angular 7の後に、次の2つのステップに単純化できます：

  1. これらの3行をtsconfig.jsonファイルのcompilerOptionsに追加します。
"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
  1. JSONデータをインポートします。
import myData from '../assets/data/my-data.json';

以上です。コンポーネント/サービスでmyDataを使用できるようになりました。

2
Yulian
let fs = require('fs');
let markers;
fs.readFile('./markers.json', handleJSONFile);

var handleJSONFile = function (err, data) {
   if (err) {
      throw err;
   }
   markers= JSON.parse(data);
 }
1
Fateh Mohamed