Wie importiere ich eine JSON-Datei in eine TypeScript-Datei?

Ich erstelle eine Kartenanwendung mit Angular Maps und möchte eine JSON-Datei als Liste von Markierungen importieren, die Standorte definieren. Ich hoffe, diese JSON-Datei als marker [] -Array in der Datei app.component.ts verwenden zu können. Anstatt ein fest codiertes Array von Markern in der TypeScript-Datei zu definieren.

Was ist der beste Prozess zum Importieren dieser JSON-Datei zur Verwendung in meinem Projekt? Jede Richtung sehr geschätzt!

Aonepathans Einzeiler arbeitete bis zu einem kürzlich durchgeführten Typoskript-Update für mich.

Ich habe den Beitrag von Jecelyn Yeen gefunden, der vorschlägt, dieses Snippet in Ihre TS-Definitionsdatei zu veröffentlichen

Fügen Sie typings.d.tsdem Stammordner des Projekts eine Datei mit dem folgenden Inhalt hinzu

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

und importieren Sie dann Ihre Daten wie folgt:

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

Update Juli 2019:

Mit Typescript 2.9 ( docs ) wurde eine bessere und intelligentere Lösung eingeführt. Schritte:

1. Fügen Sie resolveJsonModulemit dieser Zeile Unterstützung in Ihre tsconfig.jsonDatei ein:

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

Die Importanweisung kann jetzt einen Standardexport annehmen:

import data from './example.json';

und Intellisense überprüft nun die JSON-Datei, um festzustellen, ob Sie Array usw. -Methoden verwenden können. ziemlich cool.

Hier ist die vollständige Antwort für Angular 6+ basierend auf der Antwort von @ryanrain:

In angular-cli doc kann json als Assets betrachtet und über den Standardimport ohne Verwendung einer Ajax-Anforderung aufgerufen werden.

Angenommen, Sie fügen Ihre JSON-Dateien dem Verzeichnis "your-json-dir" hinzu:

1. Fügen Sie "your-json-dir" in die Datei angle.json ein (:

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

2. Erstellen oder bearbeiten Sie die Datei typings.d.ts (in Ihrem Projektstamm) und fügen Sie den folgenden Inhalt hinzu:

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

   Dies ermöglicht den Import von ".json" -Modulen ohne Typoskriptfehler.

3. Importieren Sie die Datei in Ihrer Controller- / Service- / sonstigen Datei einfach über diesen relativen Pfad:

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

Wie in diesem reddit-Beitrag angegeben , können Sie nach Angular 7 die folgenden Schritte vereinfachen:

1. Fügen Sie diese drei Zeilen zu compilerOptionsIhrer tsconfig.jsonDatei hinzu:

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

2. Importieren Sie Ihre JSON-Daten:

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

Und das ist es. Sie können jetzt myDatain Ihren Komponenten / Diensten verwenden.

Vielen Dank für die Eingabe, ich konnte das Update finden, ich habe den json oben in der Datei app.component.ts hinzugefügt und definiert:

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

Dies erzeugte letztendlich die Marker und ist eine einfache Codezeile.

Erste Lösung - ändern Sie einfach die Erweiterung Ihrer .json-Datei in .ts und fügen Sie sie export defaultam Anfang der Datei wie folgt hinzu :

export default {
   property: value;
}

Dann können Sie die Datei einfach importieren, ohne Eingaben hinzufügen zu müssen:

import data from 'data';

Zweite Lösung Holen Sie sich den JSON über HttpClient.

Injizieren Sie HttpClient wie folgt in Ihre Komponente:

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

und dann benutze diesen Code:

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

https://angular.io/guide/http

Diese Lösung hat einen deutlichen Vorteil gegenüber anderen hier bereitgestellten Lösungen: Sie müssen nicht die gesamte Anwendung neu erstellen, wenn sich Ihr JSON ändert (sie wird dynamisch aus einer separaten Datei geladen, sodass Sie nur diese Datei ändern können).

Ich hatte einige der Antworten gelesen und sie schienen für mich nicht zu funktionieren. Ich verwende Typescript 2.9.2, Angular 6 und versuche, JSON in einen Jasmine Unit Test zu importieren. Das hat mir den Trick getan.

Hinzufügen:

"resolveJsonModule": true,

Zu tsconfig.json

Import wie:

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

Stoppen Sie ng test, starten Sie erneut.

Referenz: https://blogs.msdn.microsoft.com/typescript/2018/05/31/announcing-typescript-2-9/#json-imports

Für Angular 7+

1) Fügen Sie dem Stammordner des Projekts eine Datei "typings.d.ts" hinzu (z. B. src / typings.d.ts):

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

2) JSON-Daten importieren und darauf zugreifen:

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

}

oder:

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

}

In angle7 habe ich einfach verwendet

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

Meine route.json-Datei sieht so aus

{

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

Sie greifen mit auf json-Elemente zu

routesObject.routeEmployeeList

Ab Typescript 2.9 kann man einfach hinzufügen:

"compilerOptions": {
    "resolveJsonModule": true
}

zum tsconfig.json. Danach ist es einfach, eine JSON-Datei zu verwenden ( und es wird auch in VSCode eine nette Typinferenz geben):

data.json::

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

In Ihrer Typescript-Datei:

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