web-dev-qa-db-fra.com

Comment importer un fichier JSON dans un fichier TypeScript?

Je construis une application cartographique avec Angular Maps et souhaite importer un fichier JSON en tant que liste de marqueurs définissant des emplacements. J'espère utiliser ce fichier JSON comme tableau de marqueurs [] dans le fichier app.component.ts. Au lieu de définir un tableau codé en dur de marqueurs dans le fichier TypeScript.

Quel est le meilleur processus d'importation de ce fichier JSON pour une utilisation dans mon projet? Toute direction grandement appréciée!

jsonangulargoogle-mapstypescriptmaps
36
aonepathan

One-Liner d'Aonepathan fonctionnait pour moi jusqu'à une récente mise à jour de TypeScript.

J'ai trouvé post de Jecelyn Yeen qui suggère de poster cet extrait dans votre fichier de définition TS

ajoute le fichier typings.d.ts au dossier racine du projet avec le contenu ci-dessous

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

puis importez vos données comme ceci:

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

mise à jour juillet 2019:

TypeScript 2.9 ( docs ) a introduit une solution meilleure et plus intelligente. Pas:

  1. Ajoutez le support resolveJsonModule avec cette ligne dans votre fichier tsconfig.json:
"compilerOptions": {
    ...
    "resolveJsonModule": true
  }

la déclaration d'importation peut maintenant supposer une exportation par défaut:

import data from './example.json';

et intellisense va maintenant vérifier le fichier json pour voir si vous pouvez utiliser les méthodes Array etc. plutôt cool.

41
ryanrain

Voici la réponse complète pour Angular 6+ basée sur la réponse @ryanrain:

Depuis angular-cli doc , json peut être considéré comme un actif et accessible depuis une importation standard sans utiliser de requête ajax.

Supposons que vous ajoutiez vos fichiers JSON dans le répertoire "your-json-dir":

  1. ajoutez "your-json-dir" dans le fichier angular.json (:

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

  2. créez ou modifiez le fichier typings.d.ts (à la racine de votre projet) et ajoutez le contenu suivant:

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

    Cela permettra l'importation de modules ".json" sans erreur TypeScript.

  3. dans votre fichier contrôleur/service/autre chose, importez simplement le fichier en utilisant ce chemin relatif:

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

21
Benjamin Caure

Merci pour la contribution des gars, j'ai pu trouver le correctif, j'ai ajouté et défini le json au-dessus du fichier app.component.ts:

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

Cela a finalement produit les marqueurs et constitue une simple ligne de code.

16
aonepathan

Première solution - changez simplement l'extension de votre fichier .json en .ts et ajoutez export default au début du fichier, comme suit:

export default {
   property: value;
}

Ensuite, vous pouvez simplement importer le fichier sans avoir à ajouter de frappe, comme ceci:

import data from 'data';

Deuxième solution récupérez le fichier json via HttpClient.

Injectez HttpClient dans votre composant, comme suit:

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

puis utilisez ce code:

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

https://angular.io/guide/http

Cette solution a un avantage évident par rapport aux autres solutions fournies ici. Elle ne vous oblige pas à reconstruire une application complète si votre json va changer (il est chargé dynamiquement de un fichier séparé, vous ne pouvez donc modifier que ce fichier).

13
vicbyte

J'avais lu certaines réponses et elles ne semblaient pas fonctionner pour moi. J'utilise TypeScript 2.9.2, Angular 6 et j'essaie d'importer JSON dans un test unitaire Jasmine. C'est ce qui a fait le tour pour moi.

Ajouter:

"resolveJsonModule": true,

Pour tsconfig.json

Importer comme:

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

Arrêtez ng test, recommencez.

Référence: https://blogs.msdn.Microsoft.com/TypeScript/2018/05/31/announcing-TypeScript-2-9/#json-imports

7
Ian Jamieson

Pour Angular 7+,

1) ajoutez un fichier "typings.d.ts" au dossier racine du projet (par exemple, src/typings.d.ts):

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

2) importer et accéder aux données JSON soit:

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

}

ou:

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

}
6
Stevemaster92

Dans angular7, j'ai simplement utilisé

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

Mon fichier routes.json ressemble à ceci

{

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

Vous accédez aux éléments json à l'aide de

routesObject.routeEmployeeList
5
Kodjo Tchioffo

A partir de TypeScript 2.9 , on peut simplement ajouter:

"compilerOptions": {
    "resolveJsonModule": true
}

au tsconfig.json. Par la suite, il est facile d’utiliser un fichier json ( et , il y aura aussi une inférence de type de Nice dans VSCode):

data.json:

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

Dans votre fichier TypeScript:

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

4
Nigel Gilbert

Comme indiqué dans ce post reddit , après Angular 7, vous pouvez simplifier les choses en ces 2 étapes:

  1. Ajoutez ces trois lignes à compilerOptions dans votre fichier tsconfig.json:
"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
  1. Importez vos données json:
import myData from '../assets/data/my-data.json';

Et c'est tout. Vous pouvez maintenant utiliser myData dans vos composants/services.

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