Як читати файл JSON у JavaScript: читання JSON у JS
Перекладач: Ihor Zakatsiura 
Автор: Joel Olawanle (Англійська)
Під час отримання даних із зовнішніх джерел або серверів потрібно переконатися, що дані, які повертаються, мають формат JSON. Тоді ви можете використовувати їх у своїй програмі.
У деяких ситуаціях, працюючи локально або під час завантаження файлів даних на сервер, ми можемо забажати прочитати ці дані JSON із файлу.
Ми дізнаємося, як це зробити в цьому посібнику.
Як читати файл JSON у JavaScript за допомогою Fetch API
Одним із стандартних методів, який ми можемо використовувати для читання файлу JSON (локального файлу, або файлу, завантаженого на сервер), є Fetch API. Він використовує однаковий синтаксис для обох випадків. Єдиною відмінністю буде URL-адреса.
Наприклад, припустімо, що у папці нашого проєкту є локальний файл під назвою data.json , який містить такі дані JSON:
Тепер ми можемо прочитати цей файл у JavaScript за допомогою методу Fetch API:
fetch('./data.json') .then((response) => response.json()) .then((json) => console.log(json)); У наведеному вище прикладі ми змогли прочитати локальний файл JSON. Але, на жаль, коли ми запускаємо це в браузері, ми можемо отримати таку помилку CORS (укр. спільне використання ресурсів різними джерелами), оскільки наш файл не знаходиться на сервері:
Щоб виправити це, ми переконаємося, що наш файл JSON знаходиться на локальному або віддаленому сервері. Якщо ми використовуємо Live-сервер у нашій IDE, все буде нормально. Але коли ми безпосередньо завантажуємо наш файл, ми отримуємо цю помилку.
І як я вже говорив раніше, припустімо, що у нас є файл JSON на віддаленому сервері, і ми намагаємося прочитати цей файл у JavaScript. Той самий синтаксис буде працювати:
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 ):
Ми можемо прочитати ці дані JSON у JavaScript за допомогою оператора імпорту таким чином:
import data from './data.json'; console.log(data); На жаль, це викличе помилку, що ми не можемо використовувати оператор import поза модулем. Це стандартна помилка, коли ми намагаємося використати оператор import у звичайному файлі JavaScript, особливо для розробників, які не знайомі з JavaScript.
Щоб виправити це, ми можемо додати тег script type=»module» в наш файл HTML, де ми посилалися на файл JavaScript, наприклад:
Коли ми це зробимо, ми все одно отримаємо іншу помилку:
Щоб виправити вже цю помилку, нам потрібно додати тип файлу 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, а працює як будь-який інший імпорт, який ми виконуємо.
Как импортировать 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) // => > console.log(exampleJsonFile.widget.window.title); // => Sample Konfabulator Widget Передача данных из JSON файла в JavaScript
как можно импортировать его в JavaScript, для построение графиков? Прошу не судить строго и не кидать в меня тапком, так как в етом деле я новичок! Спасибо!
Отслеживать
14k 2 2 золотых знака 10 10 серебряных знаков 19 19 бронзовых знаков
задан 28 ноя 2020 в 15:10
Святослав Гранатир Святослав Гранатир
1 1 1 бронзовый знак
каких именно графиков? посмотрите highcharts к примеру
28 ноя 2020 в 15:15
Спасибо, Zhihar, но я хотел бы узнать, как я могу получить данные с своего JSON файла, дла построение графиков. С библиотеками для построение всё понятно, но вот как данные получить, для меня ето тёмный лес)))
28 ноя 2020 в 15:20
Вам стоит уточнить, где будет исполняться JavaScript — в браузере или Node.js.
28 ноя 2020 в 15:24
vsemozhebuty, в браузере.
28 ноя 2020 в 15:26
28 ноя 2020 в 15:40
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
JSON.stringify(object) // obj => json JSON.parse(json) // json => obj они имеют второй аргумент это функция с помощью которой можно более детально преобразовать
импортировать по запросу например fetch()
Отслеживать
ответ дан 28 ноя 2020 в 15:40
1,587 1 1 золотой знак 6 6 серебряных знаков 20 20 бронзовых знаков
Спасибо огромное!))) Всё заработало))))
28 ноя 2020 в 16:35
@СвятославГранатир незачто)
28 ноя 2020 в 16:40
@СвятославГранатир отметь как ответ, пожалуйтса.
28 ноя 2020 в 18:06
- javascript
- json
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
How to import JSON files in ES modules (Node.js)
ES modules are still reasonably new in Node.js land (they’re stable since Node 14). Modules come with a built-in module system, and features such as top-level await.
I read an informative post on ES modules by Pawel Grzybek and learned that you can’t import JSON files in ES modules today.
/* Experimental JSON import in Node.js $ node index.mjs */ // An import assertion in a static import import info from `./package.json` assert type: `json` >; // An import assertion in a dynamic import const default: info > = await import("./package.json", assert: type: "json", >, >); That’s a real bummer because I’m pretty used to doing require calls such as const data = require(‘ ./some-file .json’) in Node.js.
But can you use import assertions in Node.js today?
import obj from "mod" with "type": "json" > This post explains ways to deal with JSON in ES modules if you don’t want to use the experimental features yet.
Option 1: Read and parse JSON files yourself
The Node.js documentation advises to use the fs module and do the work of reading the files and parsing it yourself.
import readFile > from 'fs/promises'; const json = JSON.parse( await readFile( new URL('./some-file.json', import.meta.url) ) ); Option 2: Leverage the CommonJS require function to load JSON files
The documentation also states that you can use createRequire to load JSON files. This approach is the way Pawel advises in his blog post.
createRequire allows you to construct a CommonJS require function to use typical CommonJS features such as reading JSON in your Node.js EcmaScript modules.
import createRequire > from "module"; const require = createRequire(import.meta.url); const data = require("./data.json"); How should you load JSON files?
For the future, import assertions are the way to go!
As for the alternatives, neither option feels great, but I’ll probably stick to the first option because it’s more understandable.
Was this snippet helpful?
Yes? Cool! You might want to check out Web Weekly for more snippets. The last edition went out 7 days ago.
Related Topics
Related Articles
- How to use headless Chrome in serverless functions with a 50MB limit
- The problem of breaking changes and version numbers
- Top-level promise handling in Node.js ES modules
- How to create a module-based Node.js executable
- Global fetch landed in Node 18
About the author
Frontend nerd with over ten years of experience, «Today I Learned» blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.