Comment importer un fichier JSON dans un fichier TypeScript?
je construis une application de carte en utilisant des cartes angulaires et je veux importer un fichier JSON comme une liste de marqueurs définissant des emplacements. J'espère utiliser ce fichier JSON comme marqueur[] à l'intérieur de l'application.composant.ts . Au lieu de définir un tableau de marqueurs codés en dur à l'intérieur du fichier dactylographié.
Quelle est la meilleure façon d'importer ce fichier JSON pour l'utiliser dans mon projet? N'importe quelle direction très appréciée!
5 réponses
Merci pour les entrées, j'ai pu trouver le correctif, j'ai ajouté et défini le json sur le dessus de l'application.composant.fichier ts:
var json = require('./[yourFileNameHere].json');
cela a finalement produit les marqueurs et est une simple ligne de code.
la doublure d'Aonepathan fonctionnait pour moi jusqu'à une récente mise à jour dactylographique.
post ce qui suggère de poster cet extrait dans votre fichier de définition TSdeclare module "*.json" {
const value: any;
export default value;
}
puis importez vos données comme ceci:
import * as data from './example.json';
Voici la réponse complète pour Angular 6+ basée sur la réponse de @ryanrain:
angulaires-cli doc, json peut être considéré comme actif et accessible à partir de l'import standard sans l'utilisation de la requête ajax.
supposons que vous ajoutiez vos fichiers json dans le répertoire" your-json-dir":
ajouter "votre-json-dir" dans angulaire.fichier json (:
"assets": [ "src/assets", "src/your-json-dir" ]créer ou éditer des typographies.d.ts fichier (à votre racine du projet) et ajoutez le contenu suivant:
declare module "*.json" { const value: any; export default value; }Cela permettra d'importation ".modules json" sans erreur typographique.
dans votre fichier controller/service/anything else file, importez simplement le fichier en utilisant ce chemin relatif:
import * as myJson from 'your-json-dir/your-json-file.json';
première solution simplement changer l'extension de vos .fichier json .ts et ajouter export default au début du fichier, comme ceci:
export default {
property: value;
}
Ensuite, vous pouvez simplement importer le fichier sans avoir besoin d'ajouter typings, comme suit:
import * as data from 'data';
deuxième solution obtenir le json via HttpClient.
injectez HttpClient dans votre composant, comme ceci:
export class AppComponent {
constructor(public http: HttpClient) {}
}
et puis utilisez ceci code:
this.http.get('/your.json').subscribe(data => {
this.results = data;
});
Cette solution a un parti par rapport aux autres solutions fournies ici - il ne vous oblige pas à reconstruire l'application entière si votre json va changer (il est chargé dynamiquement à partir d'un fichier séparé, de sorte que vous ne pouvez modifier que ce fichier).
let fs = require('fs');
let markers;
fs.readFile('./markers.json', handleJSONFile);
var handleJSONFile = function (err, data) {
if (err) {
throw err;
}
markers= JSON.parse(data);
}