Як імпортувати файл JSON у файл TypeScript?

Я створюю додаток карти за допомогою Angular Maps і хочу імпортувати файл JSON як список маркерів, що визначають місця розташування. Я сподіваюся використовувати цей файл JSON як масив marker [] всередині app.component.ts. Замість визначення жорстко закодованого масиву маркерів усередині файлу TypeScript.

Який найкращий процес імпорту цього JSON-файлу для використання в моєму проекті? Будь-який напрямок дуже вдячний!

Однокласний лайнер Aonepathan працював у мене до останнього оновлення машинопису.

Я знайшов Jecelyn Yeen в пост , який пропонує розміщення цього фрагмента коду в файл Визначення TS

додати файл typings.d.tsдо кореневої папки проекту із вмістом нижче

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

а потім імпортуйте дані так:

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

оновлення липня 2019:

Машинопис 2.9 ( docs ) представив краще, розумніше рішення. Кроки:

1. Додайте resolveJsonModuleпідтримку за допомогою цього рядка у своєму tsconfig.jsonфайлі:

"compilerOptions": {
    ...
    "resolveJsonModule": true
  }

оператор import тепер може передбачати експорт за замовчуванням:

import data from './example.json';

а intellisense тепер перевірить файл json, чи можна використовувати методи Array тощо. дуже здорово.

Як зазначено в цій публікації на Reddit , після Angular 7 ви можете спростити ці два кроки:

1. Додайте ці три рядки compilerOptionsу свій tsconfig.jsonфайл:

"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true

2. Імпортуйте свої json-дані:

import myData from '../assets/data/my-data.json';

І це все. Тепер ви можете використовувати myDataу своїх компонентах / послугах.

Ось повна відповідь для Angular 6+ на основі відповіді @ryanrain:

З документа angular -cli , json можна розглядати як активи та отримати доступ із стандартного імпорту без використання запиту ajax.

Припустимо, ви додаєте свої файли json у каталог "your-json-dir":

1. додати "your-json-dir" у файл angular.json (:

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

2. створити або відредагувати файл typings.d.ts (у корені проекту) та додати наступний вміст:

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

   Це дозволить імпортувати модулі ".json" без помилок машинопису.

3. у вашому файлі контролера / служби / будь-чого іншого, просто імпортуйте файл, використовуючи цей відносний шлях:

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

Дякую за введення, хлопці, мені вдалося знайти виправлення, я додав і визначив json поверх файлу app.component.ts:

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

Це в кінцевому підсумку створило маркери і являє собою простий рядок коду.

Перше рішення - просто змініть розширення вашого .json-файлу на .ts та додайте export defaultна початку файлу приблизно так:

export default {
   property: value;
}

Тоді ви можете просто імпортувати файл без необхідності додавати типи, наприклад:

import data from 'data';

Друге рішення - отримати json через HttpClient.

Введіть HttpClient у ваш компонент приблизно так:

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

а потім скористайтеся цим кодом:

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

https://angular.io/guide/http

Це рішення має одне явне перевагу перед іншими рішеннями, представленими тут - воно не вимагає від вас перебудови цілої програми, якщо ваш json зміниться (він динамічно завантажується з окремого файлу, тому ви можете змінити лише цей файл).

Я прочитав деякі відповіді, і вони, здається, не працювали для мене. Я використовую Typescript 2.9.2, Angular 6 і намагаюся імпортувати 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

Для 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);
    }

}

У angular7 я просто використовував

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

Мій файл routes.json виглядає так

{

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

Ви отримуєте доступ до елементів JSON за допомогою

routesObject.routeEmployeeList

Що стосується Typescript 2.9 , можна просто додати:

"compilerOptions": {
    "resolveJsonModule": true
}

до tsconfig.json. Після цього використовувати файл json легко ( і у VSCode також буде приємний висновок типу):

data.json:

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

У вашому файлі Typescript:

import { cases } from './data.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);
 }

Кутова 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"
  ]
}