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?

what do you mean by locally stored ? is it on your machine or in codebase ? — programoholic, Jun 04 '21 at 17:34
@Liad I've tried import photos from "./assets/photos.json" but it says it cant find the module — Cameron Cheung, Jun 04 '21 at 17:42
@CameronCheung check my answer with example : https://stackoverflow.com/a/67841905/8175467 — programoholic, Jun 04 '21 at 18:00
Does this answer your question? [Importing JSON file in TypeScript](https://stackoverflow.com/questions/49996456/importing-json-file-in-typescript) — Liam, Jul 22 '22 at 07:51

score 10 · Accepted Answer · edited Jul 11 '23 at 17:16

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

Open tsconfig.json and if resolveJsonModule is not present in the compilerOptions then add it as below:
```
"resolveJsonModule": true,
```
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

score 1 · Answer 2 · answered Jun 04 '21 at 17:45

1

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.

answered Jun 04 '21 at 17:45

Mathlete-101

11
1

score 0 · Answer 3 · answered Jun 04 '21 at 17:52

0

You can import the json file

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

then declare like below for typing

const samples = (all as DataType)

answered Jun 04 '21 at 17:52

Patrick

93
1
1
6

Liad · Answer 4 · 2021-06-05T09:38:06.160

0

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';

edited Jun 05 '21 at 09:38

answered Jun 04 '21 at 17:56

Liad

789
4
10

Read local JSON file in typescript

4 Answers4