JavaScriptFrontendBackendNode.js

Как читать JSON-файлы в JavaScript: Fetch API, Node.js и ES6 Import

·MAGMA

Чтение JSON в браузере

В браузерах чтение JSON-файлов осуществляется через Fetch API:

async function loadData() {
    try {
        const response = await fetch('./data.json');
        if (!response.ok)
            throw new Error(`Статус: ${response.status}`);
        const data = await response.json();
        console.log(data);
    } catch (err) {
        console.error("Ошибка загрузки JSON: ", err.message);
    }
}
loadData();

Важно: Браузеры не могут напрямую считывать файлы с диска; файл должен быть доступен через веб-сервер или локальный сервер разработки.

Чтение JSON в Node.js

Для чтения файлов в среде Node.js используется модуль fs:

const fs = require('fs');
const raw = fs.readFileSync('./data.json', 'utf8');
const data = JSON.parse(raw);
console.log(data);

Асинхронный вариант предпочтителен при работе с большими файлами:

const fs = require('fs/promises');
async function load() {
    const raw = await fs.readFile('./data.json', 'utf8');
    const data = JSON.parse(raw);
    console.log(data);
}

Начиная с версии Node.js 17.5+, можно использовать статический импорт JSON-файла:

import data from './data.json' assert { type: 'json' };
console.log(data);

Распространённые ошибки

ОшибкаПричина
SyntaxErrorНеверно сформированный JSON
Failed to fetchФайл недоступен на сервере
ENOENT: No such fileНеправильный путь до файла в Node.js

Подробное руководство доступно здесь.

Вернуться к блогу
Чтение JSON-файлов в JS: Fetch API, Node.js, ES6 — MAGMA