Оригінальна публікація: 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 (укр. спільне використання ресурсів різними джерелами), оскільки наш файл не знаходиться на сервері:
Щоб виправити це, ми переконаємося, що наш файл 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>
Коли ми це зробимо, ми все одно отримаємо іншу помилку:
Щоб виправити вже цю помилку, нам потрібно додати тип файлу JSON до оператора import
, і тоді ми зможемо прочитати наш файл JSON у JavaScript:
import data from './data.json' assert { type: 'JSON' };
console.log(data);
Це ідеально працює, якщо ми запускаємо наші файли на локальному або віддаленому сервері. Але припустімо, що ми запускаємо це локально — тоді ми отримаємо помилку CORS.
Підбиваючи підсумки
У цій статті ми дізналися, як читати файл JSON у JavaScript і можливі помилки, з якими ми можемо зіткнутися під час використання кожного методу.
Найкраще використовувати метод fetch API, коли ви хочете зробити запит HTTP. Наприклад, припустімо, що ми отримуємо дані з фальшивого файлу JSON, який ми зрештою витягнемо з API.
Тим не менш, у ситуації, коли нам не потрібно використовувати запит HTTP, ми можемо використати оператор import
. Ми можемо використовувати import
, коли використовуємо такі бібліотеки, як React та Vue, які мають відношення до модулів. Це означає, що нам не потрібно буде додавати тип модуля, а також нам не потрібно буде додавати тип файлу.
Жоден із цих методів не потребує встановлення пакету чи використання бібліотеки, оскільки вони є вбудованими. Вибирати, який метод використовувати, повністю залежить від вас.
Але коротка порада, яка відрізняє ці методи, полягає в тому, що Fetch API зчитує файл JSON у JavaScript, надсилаючи запит HTTP, тоді як оператор import
не потребує жодного запиту HTTP, а працює як будь-який інший імпорт, який ми виконуємо.