Как импортировать json в js

К приятным особенностям json-формата относится то, что его можно импортировать в нужном нам модуле напрямую, не используя методы для чтения файлов, такие как fs.readFileSync(). Дело в том, что метод fs.readFileSync() и другие относятся к среде node.js и не будут работать в браузере, а попытка их импорта, например, внутри React-приложения:

import { readFileSync } from 'node:fs';

приведет к падениям и ошибкам.

Предположим, у нас есть следующие данные в формате json:

{"widget": {
  "debug": "on",
  "window": {
    "title": "Sample Konfabulator Widget",
    "name": "main_window",
    "width": 500,
    "height": 500
  }
}}

Сохраним эти данные внутри нашего приложения по адресу data/example.json. А потом просто импортируем их там, где они нам нужны, не забыв указать правильный путь:

import exampleJsonFile from './data/example.json'; // имя при импорте может не совпадать с именем файла

Еще одна важная особенность заключается в том, что при таком способе данные парсятся автоматически, и нет необходимости использовать JSON.parse():

// вывод смотрим в инструментах разработчика (F12)

console.log(typeof exampleJsonFile); // => object
console.log(exampleJsonFile.widget) // => {debug: 'on', window: {…}}
console.log(exampleJsonFile.widget.window.title); // => Sample Konfabulator Widget

Для того чтобы "распарсить" json-данные, и превратить их в js-объект, достаточно использовать метод JSON.parse().

// Читаем json-файл, результатом в data будет строка
const readFile = fs.readFileSync('jsonex.json', 'utf8');
console.log(readFile);
/* Результат:
{ 
  "id": "1",
  "firstName": "Tom",
  "lastName": "Cruise"
}
*/
const parsedData = JSON.parse(readFile);
// После парсинга переменной мы получаем объект, к свойствам которого можно обращаться как обычно — например, через "." 
console.log(parsedData.firstName);
// Результат: Tom

Способ зависит от того, где работает код.

ES-модули: import with type json

import data from './data.json' with { type: 'json' };

console.log(data.name);

Без with { type: 'json' } браузер и Node.js выдадут ошибку. Синтаксис работает в Node.js 22 и новее и в актуальных версиях Chrome, Edge, Safari и Firefox.

JSON-модуль даёт только экспорт по умолчанию. Именованный импорт import { name } from './data.json' не сработает.

Динамический импорт:

const { default: data } = await import('./data.json', { with: { type: 'json' } });

CommonJS: require

const data = require('./data.json');

Node.js читает и разбирает файл сам. Файл кэшируется: если он изменится во время работы программы, повторный require вернёт старые данные.

Чтение файла через fs

Если файл нужно перечитывать или путь известен только во время работы:

import { readFile } from 'node:fs/promises';

const text = await readFile('./data.json', 'utf-8');
const data = JSON.parse(text);

Путь в readFile считается от папки, из которой запустили программу. Где лежит файл с кодом, значения не имеет.

Браузер без сборщика

const response = await fetch('/data.json');
const data = await response.json();
console.log(data);

Страница должна открываться через сервер. Если открыть HTML двойным кликом (адрес начинается с file://), браузер заблокирует запрос. Для проверки хватит npx serve в папке проекта.

Vite и webpack

Сборщики импортируют JSON без дополнительных настроек:

import data from './data.json';
import { version } from './package.json';

В Vite работает и именованный импорт отдельных полей.

TypeScript

Включите в tsconfig.json:

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

После этого TypeScript знает типы полей из файла.

Ошибка Unexpected token в JSON

JSON.parse и импорт падают, если в файле есть комментарии, одинарные кавычки или запятая после последнего элемента. В JSON допустимы только двойные кавычки и нет комментариев.

Модули, import и работу с данными разбирают в бесплатном курсе «Основы JavaScript».