How to import JSON File into a TypeScript file

Question

I am building a map application using Angular Maps and want to import a JSON file as a list of markers defining locations  I m hoping to use this JSON file as marker   array inside the app component ts   Instead of defining a hardcoded array of markers inside the TypeScript file   What is the best process of importing this JSON file for use in my project  Any direction greatly appreciated

User · Answer

let fs   require  fs    let markers  fs readFile    markers json   handleJSONFile    var handleJSONFile   function  err  data       if  err          throw err          markers  JSON parse data

User · Answer

I couldn t import a different file json too  But I resolved it like this const swaggerDoc   require     swagger json

User · Answer

I had read some of the responses and they didn t seem to work for me  I am using Typescript 2 9 2  Angular 6 and trying to import JSON in a Jasmine Unit Test  This is what did the trick for me   Add    resolveJsonModule   true    To tsconfig json  Import like   import   as nameOfJson from  path to file json     Stop ng test  start again   Reference  https   blogs msdn microsoft com typescript 2018 05 31 announcing-typescript-2-9  json-imports

User · Answer

Thanks for the input guys  I was able to find the fix  I added and defined the json on top of the app component ts file   var json   require     yourFileNameHere  json      This ultimately produced the markers and is a simple line of code

User · Answer

Angular 10 You should now edit the tsconfig app json  notice the  quot app quot  in the name  file instead  There you ll find the compilerOptions  and you simply add resolveJsonModule  true  So  for example  the file in a brand new project should look like this     To learn more about this file see  https   angular io config tsconfig          quot extends quot    quot   tsconfig base json quot      quot compilerOptions quot          quot outDir quot    quot   out-tsc app quot        quot types quot            quot resolveJsonModule quot   true         quot files quot          quot src main ts quot        quot src polyfills ts quot          quot include quot          quot src      d ts quot

User · Answer

As of Typescript 2 9  one can simply add    compilerOptions          resolveJsonModule   true     to the tsconfig json   Thereafter  it s easy to use a json file  and there will be nice type inference in VSCode  too    data json          cases                            foo    bar                      In your Typescript file   import   cases   from    data json

User · Answer

Here is complete answer for Angular 6  based on  ryanrain answer   From angular-cli doc  json can be considered as assets and accessed from standard import without use of ajax request   Let s suppose you add your json files into  your-json-dir  directory    add  your-json-dir  into angular json file      assets        src assets      src your-json-dir    create or edit typings d ts file  at your project root  and add the following content   declare module    json        const value  any      export default value     This will allow import of   json  modules without typescript error  in your controller service anything else file  simply import the file by using this relative path   import   as myJson from  your-json-dir your-json-file json

User · Answer

For Angular 7     1  add a file  typings d ts  to the project s root folder  e g   src typings d ts    declare module    json        const value  any      export default value      2  import and access JSON data either   import   as data from  path to jsonData example json       export class ExampleComponent       constructor             console log data default              or   import data from  path to jsonData example json       export class ExampleComponent       constructor             console log data

User · Answer

Aonepathan s one-liner was working for me until a recent typescript update    I found Jecelyn Yeen s post which suggests posting this snippet into your TS Definition file  add file typings d ts to the project s root folder with below content  declare module    json        const value  any      export default value      and then import your data like this   import   as data from    example json    update July 2019   Typescript 2 9  docs  introduced a better  smarter solution  Steps    Add resolveJsonModule support with this line in your tsconfig json file      compilerOptions                  resolveJsonModule   true       the import statement can now assumes a default export    import data from    example json    and intellisense will now check the json file to see whether you can use Array etc  methods  pretty cool

User · Answer

In angular7  I simply used  let routesObject   require    routes json      My routes json file looks like this          routeEmployeeList       employee-list        routeEmployeeDetail         employee  id      You access json items using  routesObject routeEmployeeList

User · Answer

First solution - simply change the extension of your  json file to  ts and add export default at the beginning of the file  like so   export default      property  value      Then you can just simply import the file without the need to add typings  like so   import data from  data       Second solution get the json via HttpClient   Inject HttpClient into your component  like so   export class AppComponent      constructor public http  HttpClient         and then use this code   this http get   your json   subscribe data   gt      this results   data        https   angular io guide http  This solution has one clear adventage over other solutions provided here - it doesn t require you to rebuild entire application if your json will change  it s loaded dynamically from a separate file  so you can modify only that file

User · Answer

As stated in this reddit post  after Angular 7  you can simplify things to these 2 steps    Add those three lines to compilerOptions in your tsconfig json file     resolveJsonModule   true   esModuleInterop   true   allowSyntheticDefaultImports   true    Import your json data    import myData from     assets data my-data json     And that s it  You can now use myDatain your components services

[json] How to import JSON File into a TypeScript file?

Examples related to json

Examples related to angular

Examples related to google-maps

Examples related to typescript

Examples related to maps