Блог

Как я могу прочитать локально сохраненный файл JSON в переменную в typescript? У меня есть файл фотографий в формате json, который выглядит следующим образом:

 [
    {
      "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
    }
]
 

Я пытаюсь прочитать файл в виде текста, а затем использовать Json.Parse , но как я могу прочитать его в виде текста в первую очередь? Я пробовал использовать FileReader.readAsText, но он принимает только объекты blob-объектов. Нужно ли мне создавать объект blob-объекта из моего пути к файлу или есть более простой способ чтения локальных файлов JSON?

Вы можете это сделать, но вам нужно изменить tsconfig.json . Внутри tsconfig.json есть настройка под названием resolveJsonModule . По умолчанию его значение равно false .

TL;DR

1. Откройте tsconfig.json и, если resolveJsonModule его нет в списке compilerOptions , добавьте его, как показано ниже :

"resolveJsonModule": true,

2. Откройте компонент, в котором вы хотите прочитать файл, и импортируйте его, как :

import * as photos from '../../path-to file';

вышеуказанных изменений достаточно для импорта файла.

Вот пример : Пример Стекблитца

Если вы не ожидаете, что файл изменится, вы можете использовать require('path') его для его получения. Он должен просто вернуть объект; нет необходимости в JSON.parse.

Вы можете импортировать файл json

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

затем объявите, как показано ниже, для ввода

 const samples = (all as DataType)
 

Вам нужно добавить это в свой tsconfig

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

А затем импортируйте его, как любой модуль

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