use - using json typescript




Como importar o arquivo JSON em um arquivo TypeScript? (7)

Eu estou construindo um aplicativo de mapa usando o Angular Maps e quero importar um arquivo JSON como uma lista de marcadores que definem os locais. Eu estou esperando para usar este arquivo JSON como array marker [] dentro do app.component.ts. Em vez de definir uma matriz codificada de marcadores dentro do arquivo TypeScript.

Qual é o melhor processo de importação desse arquivo JSON para uso no meu projeto? Qualquer direção muito apreciada!


A partir do Typescript 2.9 , pode-se simplesmente adicionar:

"compilerOptions": {
    "resolveJsonModule": true
}

para o tsconfig.json . A partir daí, é fácil usar um arquivo json ( e também haverá uma boa inferência de tipos no VSCode):

data.json :

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

No seu arquivo datilografado:

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


Aqui está a resposta completa para o Angular 6+ com base na resposta @ryanrain:

De angular-cli doc , json pode ser considerado como ativo e acessado a partir de uma importação padrão sem o uso de um pedido ajax.

Vamos supor que você adicione seus arquivos json ao diretório "your-json-dir":

  1. adicione "seu-json-dir" no arquivo angular.json (:

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

  2. crie ou edite o arquivo typings.d.ts (na raiz do seu projeto) e adicione o seguinte conteúdo:

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

    Isso permitirá a importação de módulos ".json" sem erro de datilografia.

  3. no seu arquivo controller / service / anything, simplesmente importe o arquivo usando este caminho relativo:

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


Em angular7, eu simplesmente usei

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

Meu arquivo routes.json se parece com isso

{

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

Você acessa itens json usando

routesObject.routeEmployeeList

Eu tinha lido algumas das respostas e elas não pareciam funcionar para mim. Eu estou usando o Typescript 2.9.2, Angular 6 e tentando importar JSON em um teste de unidade do Jasmine. Isto é o que fez o truque para mim.

Adicionar:

"resolveJsonModule": true,

Para tsconfig.json

Importar como:

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

Pare o ng test , comece de novo.

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


Obrigado pela entrada, consegui encontrar a correção, adicionei e defini o json no topo do arquivo app.component.ts:

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

Isso acabou produzindo os marcadores e é uma linha simples de código.


Para o Angular 7+,

1) adicione um arquivo "typings.d.ts" à pasta raiz do projeto (por exemplo, src / typings.d.ts):

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

2) importar e acessar dados JSON:

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

}

let fs = require('fs');
let markers;
fs.readFile('./markers.json', handleJSONFile);

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




maps