javascriptjsonangulartypescriptreader

Read local JSON file in typescript


How can I read a locally stored JSON file into a variable in typescript? I have a json file of photos that looks like this:

[
    {
      "id": 1,
      "camera": "",
      "location": "",
      "iso": 0,
      "aperture": 0,
      "focal length": 0
    },
    {
      "id": 2,
      "camera": "",
      "location": "",
      "iso": 0,
      "aperture": 0,
      "focal length": 0
    },
    {
      "id": 3,
      "camera": "",
      "location": "",
      "iso": 0,
      "aperture": 0,
      "focal length": 0
    }
]

I'm trying to read the file as text and then use Json.Parse but how do I read it as text in the first place? I've tried using FileReader.readAsText but it only accepts blob objects. Do I need to create a blob object from my filepath or is there a easier way to read local JSON files?


Solution

  • You can do it but need to modify tsconfig.json. In tsconfig.json there is a setting called resolveJsonModule. By default its value is set to false.

    TL;DR

    1. Open tsconfig.json and if resolveJsonModule is not present in the compilerOptions then add it as below:
      "resolveJsonModule": true,
      
    2. Open the component where you want to read the file and import like:
      import * as photos from '../../path-to file';
      

    the above changes are sufficient to import the file. Here is the example : Stackblitz Example