Read local JSON file in typescript

Question

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?

Iridescence

what do you mean by locally stored ? is it on your machine or in codebase ? – Rambler

A simple import should do it – Wrongdoing

It's stored in the codebase – Iridescence

@Wrongdoing I've tried import photos from "./assets/photos.json" but it says it cant find the module – Iridescence

In the codebase and bundled with the code, right? – Impalpable

@CameronCheung check my answer with example : https://mcmap.net/q/1408034/-read-local-json-file-in-typescript – Rambler

Does this answer your question? Importing JSON file in TypeScript – Sprightly

Answer 1

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

Rambler

Answer 2

You can import the json file

import all from '../../path/to/file.json'

then declare like below for typing

const samples = (all as DataType)

Benbena

Answer 3

If you don't expect the file to change, you can use require('path') to get it. It should just return the object; no need to JSON.parse.

Outstretched

Answer 4

You need to add this to your tsconfig

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

And then import it like any module

import myfile from './path/to/json/file.json';

Wrongdoing