Содержание статьи
JSON часто используется для хранения настроек, текстовых данных интерфейса, результатов API или структуры каталога товаров. В JavaScript поддержка JSON встроена, поэтому данные можно подключать разными способами: через import, fetch(), динамический импорт или работу с файлами в Node.js.
При выборе метода важно учитывать среду: браузер, серверный JavaScript или сборщик модулей. Например, в браузере удобнее использовать fetch(), а в Node.js доступны встроенные модули require() и fs. Также стоит знать, что импорт JSON как ES-модуля поддерживается только при указании опции type: «module» в настройках проекта.
Дополнительно важно понимать разницу между импортом файла и преобразованием строки в объект. Если данные передаются в JSON-формате из API, их необходимо вручную разобрать с помощью JSON.parse(). Если файл подключается напрямую, преобразование уже выполняется автоматически.
Импорт JSON-файла через ES-модуль с использованием import
Импорт JSON через import работает только при активированном модульном режиме. В браузере необходимо указать атрибут type=»module» у тега <script>, в Node.js – установить параметр «type»: «module» в package.json. Без этого синтаксис модулей будет недоступен.
Пример подключения JSON как модуля:
import data from ‘./data.json’ assert { type: ‘json’ };
Флаг assert { type: ‘json’ } сообщает интерпретатору, что подключаемый ресурс не является JS-кодом, а представляет собой структурированный файл. В некоторых сборщиках (например, Vite или Webpack) этот флаг не требуется, но в чистом браузере и Node.js он обязателен.
Перед подключением стоит убедиться, что JSON корректно структурирован. Ошибка синтаксиса блокирует загрузку данных на этапе парсинга.
| Ситуация | Результат | Комментарий |
|---|---|---|
| Корректный JSON | Файл импортируется | Доступ к данным через переменную, указанную в import |
| Отсутствует assert | Ошибка загрузки | Требуется для нативного импорта в браузере и Node.js |
| Неверная структура файла | Синтаксическая ошибка | Парсер прекращает выполнение модуля |
Если файл обновляется часто, целесообразно использовать динамический импорт, чтобы не загружать данные заранее. В остальных случаях статический синтаксис помогает получить JSON при инициализации модуля без дополнительных запросов.
Загрузка JSON через fetch() и обработка ответа
Метод fetch() подходит для получения данных из внешнего API или локального файла, размещённого на сервере. Ответ необходимо преобразовать в объект с помощью метода .json(), иначе данные будут представлять собой строку.
Пример запроса:
fetch(‘/data.json’)
.then(response => response.json())
.then(result => console.log(result));
При работе с сервером полезно обрабатывать ошибки, поскольку запрос может завершиться с кодом 404 или 500. Для таких случаев стоит проверять свойство response.ok.
- Загрузка данных выполняется асинхронно.
- Файл должен быть доступен по URL, иначе запрос будет прерван.
- Кэширование зависит от настроек сервера и параметров запроса.
С проверкой статуса:
fetch(‘/data.json’)
.then(response => {
if (!response.ok) throw new Error(response.status);
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error(error));
- Получить ответ.
- Проверить статус.
- Преобразовать JSON в объект.
- Использовать данные в интерфейсе, логике или хранилище.
Чтение локального JSON в Node.js через require()
Подключение JSON через require() используется в проектах, где модульная система CommonJS включена по умолчанию. Метод загружает файл синхронно и автоматически преобразует содержимое в объект JavaScript.
Пример подключения:
const config = require(‘./config.json’);
После загрузки доступ к данным осуществляется через свойства объекта. Node.js сохраняет результат в кэше, поэтому повторные вызовы require() не читают файл повторно.
- Путь должен указывать на существующий файл.
- Расширение .json необязательно, однако его использование упрощает навигацию.
- Недопустимы лишние запятые и некорректный формат содержимого.
Если требуется обновление файла без перезапуска процесса, кэш можно удалить вручную:
delete require.cache[require.resolve(‘./config.json’)];
- Указать путь к файлу.
- Подключить JSON через require().
- Обратиться к свойствам полученного объекта.
- При необходимости очистить кэш, если файл изменяется в процессе работы.
Использование fs.readFile() для импорта JSON в Node.js
Метод fs.readFile() подходит для асинхронного чтения JSON-файлов. В отличие от require(), файл загружается при каждом вызове, что позволяет получать актуальные данные без очистки кэша.
Пример кода:
const fs = require(‘fs’);
fs.readFile(‘./data.json’, ‘utf8’, (err, content) => {
if (err) throw err;
const data = JSON.parse(content);
console.log(data);
});
Параметр ‘utf8’ обязателен, иначе результат будет представлен буфером. После чтения данные необходимо преобразовать в объект через JSON.parse().
Для удобства можно использовать fs.promises.readFile() в сочетании с async/await:
const fs = require(‘fs’).promises;
async function load() {
const content = await fs.readFile(‘./data.json’, ‘utf8’);
return JSON.parse(content);
}
load().then(console.log);
Подход с fs.readFile() используется в задачах, где JSON обновляется во время работы приложения или требуется контроль ошибок и структуры перед обработкой данных.
Импорт динамических JSON-файлов с помощью динамического import()
Динамический импорт используется, когда путь к JSON известен только во время выполнения. Метод возвращает промис, поэтому работа с данными выполняется через await или .then(). Подход подходит для приложений, где загружаются разные наборы данных в зависимости от языка интерфейса, версии конфигурации или пользовательского действия.
Пример с асинхронной функцией:
async function loadJSON(path) {
const module = await import(path, { assert: { type: ‘json’ }});
return module.default;
}
loadJSON(‘./lang/ru.json’).then(console.log);
Параметр assert обязателен в средах без сборщика модулей. Некоторые инструменты сборки позволяют опустить эту конструкцию, но для нативных модулей она необходима.
Если путь содержит переменные, важно проверять существование файла. В противном случае ошибка загрузки приводит к отклонению промиса.
В сценариях, где планируется загрузка большого количества JSON, имеет смысл кэшировать результат после первого импорта, чтобы исключить повторные загрузки.
Разбор JSON-строки через JSON.parse() и работа с данными
Метод JSON.parse() используется для преобразования строки JSON в объект JavaScript. Это необходимо, когда данные поступают в виде текста, например, из API или локального текстового файла.
Пример разбора строки:
const jsonString = ‘{«name»:»Иван»,»age»:30,»skills»:[«JS»,»Node»]}’;
const data = JSON.parse(jsonString);
console.log(data.name); // Иван
console.log(data.skills[0]); // JS
Для защиты от ошибок синтаксиса рекомендуется использовать блок try/catch:
try {
const data = JSON.parse(jsonString);
console.log(data);
} catch (error) {
console.error(‘Ошибка разбора JSON:’, error);
}
После преобразования объекта доступ к свойствам выполняется стандартными методами JavaScript. Для изменения структуры данных можно использовать map, filter или циклы for, что позволяет интегрировать JSON в логику приложения.
Если требуется преобразовать объект обратно в строку для хранения или отправки, используется JSON.stringify() с настройкой форматирования:
const jsonText = JSON.stringify(data, null, 2);
console.log(jsonText);
Вопрос-ответ:
В чем разница между import и require при работе с JSON в Node.js?
require() используется в модулях CommonJS и загружает JSON синхронно с автоматическим преобразованием в объект. import работает в ES-модулях, поддерживает статический и динамический импорт и требует указания assert { type: ‘json’ } для нативного использования. Выбор зависит от типа проекта и системы модулей.
Можно ли использовать JSON.parse() для данных, полученных через fetch?
Да, но это обычно не требуется. Метод response.json() уже преобразует JSON-строку в объект. Если данные приходят как текст (response.text()), тогда необходимо применить JSON.parse() для превращения строки в объект JavaScript.
Загрузка...
