Jak zaimportować plik JSON do pliku TypeScript?

Buduję aplikację mapową za pomocą Angular Maps i chcę zaimportować plik JSON jako listę markerów definiujących lokalizacje. Mam nadzieję, że użyję tego pliku JSON jako tablicy znaczników [] wewnątrz pliku app.component.ts. Zamiast definiować zakodowaną na stałe tablicę znaczników w pliku TypeScript.

Jaki jest najlepszy proces importowania tego pliku JSON do wykorzystania w moim projekcie? Doceniany każdy kierunek!

Jedna linijka Aonepathana działała dla mnie aż do ostatniej aktualizacji maszynopisu.

Znalazłem Jecelyn Yeen za wpis , który sugeruje komentarz ten fragment do pliku definicji TS

dodaj plik typings.d.tsdo folderu głównego projektu z poniższą zawartością

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

a następnie zaimportuj swoje dane w ten sposób:

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

aktualizacja lipiec 2019:

Typescript 2.9 ( docs ) wprowadził lepsze, inteligentniejsze rozwiązanie. Kroki:

1. Dodaj resolveJsonModulewsparcie z tym wierszem w swoim tsconfig.jsonpliku:

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

instrukcja import może teraz zakładać domyślny eksport:

import data from './example.json';

a intellisense sprawdzi teraz plik json, aby zobaczyć, czy możesz użyć metod Array itp. całkiem fajne.

Jak wspomniano w tym poście reddit , po Angular 7 możesz uprościć rzeczy do tych 2 kroków:

1. Dodaj te trzy linie do compilerOptionsw swoim tsconfig.jsonpliku:

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

2. Zaimportuj dane JSON:

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

I to wszystko. Możesz teraz używać myDataw swoich komponentach / usługach.

Oto pełna odpowiedź dla Angular 6+ oparta na odpowiedzi @ryanrain:

Z angular-cli doc , json można traktować jako zasoby i uzyskiwać do niego dostęp ze standardowego importu bez użycia żądania Ajax.

Załóżmy, że dodajesz swoje pliki json do katalogu „your-json-dir”:

1. dodaj „your-json-dir” do pliku angular.json (:

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

2. utwórz lub edytuj plik typings.d.ts (w katalogu głównym projektu) i dodaj następującą zawartość:

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

   Umożliwi to import modułów „.json” bez błędu maszynopisu.

3. w pliku kontrolera / usługi / czegokolwiek innego, po prostu zaimportuj plik, używając tej ścieżki względnej:

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

Dzięki za wkład, udało mi się znaleźć poprawkę, dodałem i zdefiniowałem json w górnej części pliku app.component.ts:

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

To ostatecznie stworzyło markery i jest prostą linią kodu.

Pierwsze rozwiązanie - po prostu zmień rozszerzenie swojego pliku .json na .ts i dodaj export defaultna początku pliku, na przykład:

export default {
   property: value;
}

Następnie możesz po prostu zaimportować plik bez potrzeby dodawania tekstów, na przykład:

import data from 'data';

Drugie rozwiązanie pobierz plik json za pośrednictwem HttpClient.

Wstrzyknij HttpClient do swojego komponentu, na przykład:

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

a następnie użyj tego kodu:

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

https://angular.io/guide/http

To rozwiązanie ma jedną wyraźną przewagę nad innymi rozwiązaniami przedstawionymi tutaj - nie wymaga przebudowy całej aplikacji, jeśli Twój json się zmieni (jest ładowany dynamicznie z oddzielnego pliku, więc możesz modyfikować tylko ten plik).

Przeczytałem niektóre odpowiedzi i wydawały się nie działać dla mnie. Używam Typescript 2.9.2, Angular 6 i próbuję zaimportować JSON w Jasmine Unit Test. Oto, co mi się udało.

Dodaj:

"resolveJsonModule": true,

Do tsconfig.json

Importuj jak:

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

Przestań ng test, zacznij od nowa.

Źródła: https://blogs.msdn.microsoft.com/typescript/2018/05/31/announcing-typescript-2-9/#json-imports

Dla Angular 7+,

1) dodaj plik „typings.d.ts” do folderu głównego projektu (np. Src / typings.d.ts):

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

2) importuj i uzyskuj dostęp do danych JSON:

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

}

lub:

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

}

W angular7 po prostu użyłem

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

Mój plik route.json wygląda następująco

{

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

Dostęp do elementów JSON uzyskujesz za pomocą

routesObject.routeEmployeeList

Od Typescript 2.9 można po prostu dodać:

"compilerOptions": {
    "resolveJsonModule": true
}

do tsconfig.json. Odtąd łatwo jest używać pliku json ( i będzie też ładne wnioskowanie o typie w VSCode):

data.json:

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

W pliku 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);
 }

Kątowy 10

Zamiast tego powinieneś teraz edytować plik tsconfig.app.json(zwróć uwagę na „aplikację” w nazwie).

Tam znajdziesz compilerOptionsi po prostu dodaj resolveJsonModule: true.

Na przykład plik w zupełnie nowym projekcie powinien wyglądać tak:

/* 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"
  ]
}