Как импортировать json в js

Аватар пользователя Кирилл Маркеев
Кирилл Маркеев
06 февраля 2023

К приятным особенностям 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) // => {debug: 'on', window: {…}}
console.log(exampleJsonFile.widget.window.title); // => Sample Konfabulator Widget
6 0

Для того чтобы "распарсить" json-данные, и превратить их в js-объект, достаточно использовать метод JSON.parse().

// Читаем json-файл, результатом в data будет строка
const readFile = fs.readFileSync('jsonex.json', 'utf8');
console.log(readFile);
/* Результат:
{ 
  "id": "1",
  "firstName": "Tom",
  "lastName": "Cruise"
}
*/
const parsedData = JSON.parse(readFile);
// После парсинга переменной мы получаем объект, к свойствам которого можно обращаться как обычно — например, через "." 
console.log(parsedData.firstName);
// Результат: Tom
2 0
Основы Frontend за 14 дней
  • 72 урока в онлайн-тренажере
  • 4 живых вебинара и масскодинг
  • Помощь наставника на весь период обучения

Есть что добавить? Зарегистрируйтесь

или войдите в аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Курсы по программированию на Хекслете

Backend-разработка

Разработка серверной части сайтов и веб-приложений

Frontend-разработка

Разработка внешнего интерфейса сайтов и веб-приложений и верстка

Создание сайтов

Разработка сайтов и веб-приложений на JS, Python, Java, PHP и Ruby on Rails

Тестирование

Ручное тестирование и автоматизированное тестирование на JS, Python, Java и PHP

Аналитика данных

Сбор, анализ и интерпретация данных на Python

Интенсивные курсы

Интенсивное обучение для продолжающих

DevOps

Автоматизация настройки локального окружения и серверов, развертывания и деплоя

Веб-разработка

Разработка, верстка и деплой сайтов и веб-приложений, трудоустройство для разработчиков

Математика для программистов

Обучение разделам математики, которые будут полезны при изучении программирования

JavaScript

Разработка сайтов и веб-приложений и автоматизированное тестирование на JS

Python

Веб-разработка, автоматическое тестирование и аналитика данных на Python

Java

Веб-разработка и автоматическое тестирование на Java

PHP

Веб-разработка и автоматическое тестирование на PHP

Ruby

Разработка сайтов и веб-приложений на Ruby on Rails

Go

Курсы по веб-разработке на языке Go

HTML

Современная верстка с помощью HTML и CSS

SQL

Проектирование базы данных, выполнение SQL-запросов и изучение реляционных СУБД

Git

Система управления версиями Git, регулярные выражения и основы командой строки

Похожие вопросы