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

80

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!

Aonepathan
quelle
Sie können meine Antwort sehen, wie es für Angular 7+
Yulian

Antworten:

105

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.

Ryanrain
quelle
Diese Methode hat bei mir funktioniert und scheint der sauberste und direkteste Weg zu sein, um das Problem zu lösen.
Jason Van Der Meijden
3
Das hat auch bei mir funktioniert - super schick! HINWEIS: Sie müssen Ihren Entwicklungsserver neu starten, damit dies korrekt kompiliert werden kann.
Scott Byers
11
Ich bekommeCannot find module '*.json'. Consider using '--resolveJsonModule' to import module with '.json' extensionts(2732)
Jeremy Thille
3
Ich musste auch hinzufügen "esModuleInterop": true,in der Typoskript docs wie angegeben, aber sie sagen auch zu verwenden , commonjswie das modulestatt esnext. Dies scheint mit beiden zu funktionieren. Gibt es einen Grund, zu commonjs (wie in den Dokumenten erwähnt) zu wechseln, anstatt sich an die Standardeinstellung von esnext zu halten?
Timhc22
4
Ich musste "allowSyntheticDefaultImports": truedas compilerOptionsauch mit einem neuen Angular 9.1.11 Projekt hinzufügen.
Yohosuff
25

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';

Benjamin Caure
quelle
3
Was ist, wenn ich keine typings.d.ts-Datei habe?
Kristopher Windsor
2
dann müssen Sie eine an Ihrem Projektstamm mit nur dem Inhalt von Schritt 2 erstellen
Benjamin Caure
2
Wichtiger Hinweis: Fügen Sie die benutzerdefinierte Typisierungsdatei zu typeRoots in tsconfig.json "typeRoots" hinzu: ["node_modules / @ types", "src / typings.d.ts"],
Japo Domingo
25

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
  1. 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.

Yulian
quelle
21

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.

Aonepathan
quelle
6
Ich wurde error TS2304: Cannot find name 'require'.durch Hinzufügen gelöst declare var require: any;, wie in den Kommentaren der akzeptierten Antwort auf die Frage stackoverflow.com/questions/43104114/… erläutert .
Ben
4
@Ben, Sie müssen den Knotentyp zu Ihrer tsconfig hinzufügen. dh "compilerOptions": { ... "types": ["node"] },hier ist die verwandte Antwort für diejenigen, die es benötigen: stackoverflow.com/a/35961176/1754995
Kody
Hallo @aonepathan, ich hoffe du kannst mir helfen: Ich habe eine Bibliothek, die zum Lesen eine JSON-Datei benötigt. var json = require('./[yourFileNameHere]');ohne die Erweiterung. Beim Kompilieren habe ich einen Fehler: Module not found: Error: Can't resolve [yourFileNameHere] in [file name]Haben Sie eine Idee, dieses Problem zu umgehen?
Neo1975
16

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).

Vicbyte
quelle
1
Die erste Lösung ist gut, wenn Ihre Daten statisch sind und sich sehr lange nicht ändern. Es erspart Ihnen unnötige http-Anfragen. Wenn sich diese Daten jedoch ständig ändern, verwenden Sie die zweite vom Server gesendete Lösung oder fügen Sie sie sogar einer Datenbank hinzu, wenn der Datensatz sehr
groß
10

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

Ian Jamieson
quelle
1
Dies war die beste Lösung für mich. Es wird keine Typisierungsdatei benötigt, und TS kann die Eigenschaftsnamen für Sie auflösen.
Steve Hobbs
7

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

}
Stevemaster92
quelle
data.default hat mich aufgehängt. Danke für das vollständige Beispiel!
kevin_fitz
Seien Sie vorsichtig mit dem Pfad zu Ihrer JSON-Datei, da er für die Datei relevant ist, in die Sie die Datei importieren. Wenn Sie beispielsweise einen Dienst im src/app/services/Ordner haben und sich Ihr JSON im src/assets/data/Ordner befindet, müssen Sie ihn wie folgt angeben../../assets/data/your.json
Adam Boczek
Es funktioniert perfekt, aber warum wird die Datei typings.d.ts benötigt?
Robert
5

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
Kodjo Tchioffo
quelle
Das ist es! ;-) Alle anderen Optionen sind so hacky! Wenn Sie TSLint haben, wird ein reuqireFehler ausgegeben - fügen Sie einfach declare var require: any;oben auf der Klassenkomponente hinzu.
Pedro Ferreira
5

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';

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

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