Оригінальна публікація: How to Read a JSON File in JavaScript – Reading JSON in JS

Під час отримання даних із зовнішніх джерел або серверів потрібно переконатися, що дані, які повертаються, мають формат JSON. Тоді ви можете використовувати їх у своїй програмі.

У деяких ситуаціях, працюючи локально або під час завантаження файлів даних на сервер, ми можемо забажати прочитати ці дані JSON із файлу.

Ми дізнаємося, як це зробити в цьому посібнику.

Як читати файл JSON у JavaScript за допомогою Fetch API

Одним із стандартних методів, який ми можемо використовувати для читання файлу JSON (локального файлу, або файлу, завантаженого на сервер), є Fetch API. Він використовує однаковий синтаксис для обох випадків. Єдиною відмінністю буде URL-адреса.

Наприклад, припустімо, що у папці нашого проєкту є локальний файл під назвою data.json, який містить такі дані JSON:

<!--./data.JSON-->

{
    "id": 1,
    "title": "Hello World",
    "completed": false
}

Тепер ми можемо прочитати цей файл у JavaScript за допомогою методу Fetch API:

<!--./index.js-->

fetch('./data.json')
    .then((response) => response.json())
    .then((json) => console.log(json));

У наведеному вище прикладі ми змогли прочитати локальний файл JSON. Але, на жаль, коли ми запускаємо це в браузері, ми можемо отримати таку помилку CORS (укр. спільне використання ресурсів різними джерелами), оскільки наш файл не знаходиться на сервері:

s_9630F87AB23B79DCD31DCDD0E14D2C6C4A3007934D2E561803A41CF5C1FE0085_1659464623693_image

Щоб виправити це, ми переконаємося, що наш файл JSON знаходиться на локальному або віддаленому сервері. Якщо ми використовуємо Live-сервер у нашій IDE, все буде нормально. Але коли ми безпосередньо завантажуємо наш файл, ми отримуємо цю помилку.

І як я вже говорив раніше, припустімо, що у нас є файл JSON на віддаленому сервері, і ми намагаємося прочитати цей файл у JavaScript. Той самий синтаксис буде працювати:

<!--./index.js-->

fetch('https://server.com/data.json')
    .then((response) => response.json())
    .then((json) => console.log(json));

Fetch API є кращим методом для використання, коли ми хочемо прочитати файл JSON із зовнішнього сервера або локального файлу в наш файл JavaScript.

Як прочитати файл JSON у JavaScript за допомогою оператора import

Інший метод, який ми можемо використати окрім створення запиту HTTP, є оператор import. Цей метод має кілька ускладнень, але ми розглянемо їх.

Як і в попередньому розділі, припустімо, що у нас є файл JSON, який містить дані користувача (наприклад, user.json):

<!--./user.JSON-->

{
    "id": 1,
    "name": "John Doe",
    "age": 12
}

Ми можемо прочитати ці дані JSON у JavaScript за допомогою оператора імпорту таким чином:

<!---./index.js-->

import data from './data.json';
console.log(data);

На жаль, це викличе помилку, що ми не можемо використовувати оператор import поза модулем. Це стандартна помилка, коли ми намагаємося використати оператор import у звичайному файлі JavaScript, особливо для розробників, які не знайомі з JavaScript.

Щоб виправити це, ми можемо додати тег script type="module" в наш файл HTML, де ми посилалися на файл JavaScript, наприклад:

<html lang="en">
    // ...
    <body>
        <script type="module" src="./index.js"></script>
    </body>
</html>

Коли ми це зробимо, ми все одно отримаємо іншу помилку:

s_9630F87AB23B79DCD31DCDD0E14D2C6C4A3007934D2E561803A41CF5C1FE0085_1659465574774_image

Щоб виправити вже цю помилку, нам потрібно додати тип файлу JSON до оператора import, і тоді ми зможемо прочитати наш файл JSON у JavaScript:

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

Це ідеально працює, якщо ми запускаємо наші файли на локальному або віддаленому сервері. Але припустімо, що ми запускаємо це локально — тоді ми отримаємо помилку CORS.

s_9630F87AB23B79DCD31DCDD0E14D2C6C4A3007934D2E561803A41CF5C1FE0085_1659464623693_image

Підбиваючи підсумки

У цій статті ми дізналися, як читати файл JSON у JavaScript і можливі помилки, з якими ми можемо зіткнутися під час використання кожного методу.

Найкраще використовувати метод fetch API, коли ви хочете зробити запит HTTP. Наприклад, припустімо, що ми отримуємо дані з фальшивого файлу JSON, який ми зрештою витягнемо з API.

Тим не менш, у ситуації, коли нам не потрібно використовувати запит HTTP, ми можемо використати оператор import. Ми можемо використовувати  import, коли використовуємо такі бібліотеки, як React та Vue, які мають відношення до модулів. Це означає, що нам не потрібно буде додавати тип модуля, а також нам не потрібно буде додавати тип файлу.

Жоден із цих методів не потребує встановлення пакету чи використання бібліотеки, оскільки вони є вбудованими. Вибирати, який метод використовувати, повністю залежить від вас.

Але коротка порада, яка відрізняє ці методи, полягає в тому, що Fetch API зчитує файл JSON у JavaScript, надсилаючи запит HTTP, тоді як оператор import не потребує жодного запиту HTTP, а працює як будь-який інший імпорт, який ми виконуємо.