read - ¿Cómo importar un archivo JSON a un archivo TypeScript?

read json typescript

Question

Estoy creando una aplicación de mapas usando Angular Maps y quiero importar un archivo JSON como una lista de marcadores que definen ubicaciones. Espero usar este archivo JSON como matriz de marcadores [] dentro de app.component.ts. En lugar de definir una matriz codificada de marcadores dentro del archivo TypeScript.

¿Cuál es el mejor proceso para importar este archivo JSON para usar en mi proyecto? Cualquier dirección muy apreciada!

Answer 1

A partir de Typecript 2.9 , uno simplemente puede agregar:

"compilerOptions": {
"resolveJsonModule": true
}

a la tsconfig.json . A partir de entonces, es fácil usar un archivo json ( y también habrá una buena inferencia de tipos en VSCode):

data.json :

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

En su archivo mecanografiado:

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

Answer 2

Aquí está la respuesta completa para Angular 6+ basada en la respuesta @ryanrain:

Desde angular-cli doc , json puede considerarse como activos y acceder desde la importación estándar sin el uso de la solicitud ajax.

Supongamos que agrega sus archivos json en el directorio "your-json-dir":

1. agregue "su-json-dir" en el archivo angular.json (:

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

2. cree o edite el archivo typings.d.ts (en la raíz de su proyecto) y agregue el siguiente contenido:

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

   Esto permitirá importar módulos ".json" sin error de mecanografía.

3. en su controlador / servicio / cualquier otro archivo, simplemente importe el archivo utilizando esta ruta relativa:

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

Answer 3

Como se indica en esta publicación de reddit , después de Angular 7, puede simplificar las cosas a estos 2 pasos:

1. Agregue esas tres líneas a compilerOptions en su archivo tsconfig.json :

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

2. Importa tus datos json:

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

Y eso es. Ahora puede usar myData en sus componentes / servicios.

Answer 4

En angular7, simplemente usé

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

Mi archivo routes.json se ve así

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

Accede a elementos json usando

routesObject.routeEmployeeList

Answer 5

Gracias por los comentarios, pude encontrar la solución, agregué y definí el json en la parte superior del archivo app.component.ts:

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

Esto finalmente produjo los marcadores y es una simple línea de código.

Answer 6

Había leído algunas de las respuestas y no parecían funcionar para mí. Estoy usando Typecript 2.9.2, Angular 6 e intento importar JSON en una prueba unitaria de jazmín. Esto es lo que hizo el truco para mí.

Añadir:

"resolveJsonModule": true,

A tsconfig.json

Importar como:

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

Detener la ng test , comenzar de nuevo.

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

Answer 7

La frase de Aonepathan estaba trabajando para mí hasta una reciente actualización de mecanografía.

Encontré la publicación de Jecelyn Yeen que sugiere publicar este fragmento en su archivo de definición de TS

agregue typings.d.ts archivo a la carpeta raíz del proyecto con el contenido a continuación

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

y luego importa tus datos así:

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

actualización de julio de 2019:

El mecanografiado 2.9 ( docs ) introdujo una solución mejor e más inteligente. Pasos:

1. Agregue el soporte resolveJsonModule con esta línea en su archivo tsconfig.json :

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

la declaración de importación ahora puede asumir una exportación predeterminada:

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

e intellisense ahora verificará el archivo json para ver si puede usar métodos Array, etc. muy genial.

Answer 8

Para Angular 7+,

1) agregue un archivo "typings.d.ts" a la carpeta raíz del proyecto (por ejemplo, src / typings.d.ts):

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

2) importar y acceder a datos JSON:

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

o:

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

Answer 9

Primera solución : simplemente cambie la extensión de su archivo .json a .ts y agregue export default al comienzo del archivo, de esta manera:

export default {
property: value;
}

Luego, simplemente puede importar el archivo sin la necesidad de agregar tipings, así:

import data from ''data'';

Segunda solución obtener el json a través de HttpClient.

Inyecte HttpClient en su componente, así:

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

y luego usa este código:

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

https://angular.io/guide/http

Esta solución tiene una clara ventaja sobre otras soluciones proporcionadas aquí: no requiere que reconstruya toda la aplicación si su json cambia (se carga dinámicamente desde un archivo separado, por lo que puede modificar solo ese archivo).

Answer 10

let fs = require(''fs'');
let markers;
fs.readFile(''./markers.json'', handleJSONFile);
var handleJSONFile = function (err, data) {
if (err) {
throw err;
}
markers= JSON.parse(data);
}