javascript - Read local JSON file in typescript - Stack Overflow

admin管理员组

文章数量:1200819

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?

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?

• javascript
• json
• angular
• typescript
• reader

Share Improve this question Follow asked Jun 4, 2021 at 17:25 Cameron CheungCameron Cheung 31911 gold badge44 silver badges1515 bronze badges 7

• 1 what do you mean by locally stored ? is it on your machine or in codebase ? – programoholic Commented Jun 4, 2021 at 17:34
• A simple import should do it – Liad Commented Jun 4, 2021 at 17:41
• It's stored in the codebase – Cameron Cheung Commented Jun 4, 2021 at 17:42
• @Liad I've tried import photos from "./assets/photos.json" but it says it cant find the module – Cameron Cheung Commented Jun 4, 2021 at 17:42
• In the codebase and bundled with the code, right? – Gaël J Commented Jun 4, 2021 at 17:49

 |  Show 2 more comments

4 Answers 4

Sorted by: Reset to default 13

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

You can import the json file

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

then declare like below for typing

const samples = (all as DataType)

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.

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

本文标签： javascriptRead local JSON file in typescriptStack Overflow