React прочитать json из файла

Обновлено: 06.07.2024

Я новичок в React, и я пытаюсь импортировать переменную JSON DATA из внешнего файла. Я получаю следующую ошибку:

Не удается найти модуль "./customData.json"

Может кто-нибудь мне помочь? Он работает, если у меня есть переменная DATA в index.js но не во внешнем JSON файле.

index.js hobbies.js profile.js customData.json

ОТВЕТЫ

Ответ 1

Один приятный способ (без добавления поддельного расширения.js, предназначенного для кода, а не для данных и конфигураций) - использовать модуль json-loader . Если вы использовали приложение create-react-app для подстройки вашего проекта, модуль уже включен, вам просто нужно импортировать json:

Этот ответ объясняет больше.

Ответ 2

попробуйте export default DATA или module.exports = DATA

Ответ 3

Сохраните файл JSON с расширением.js и убедитесь, что ваш JSON должен находиться в одном каталоге.

Ответ 4

Этот старый каштан.

Короче говоря, вы должны использовать require и позволить узлу обрабатывать парсинг как часть требуемого вызова, а не передавать его стороннему модулю. Вы также должны следить за тем, чтобы ваши конфиги были пуленепробиваемыми, что означает, что вы должны тщательно проверить возвращаемые данные.

Но для краткости рассмотрим следующий пример:

Например, скажем, у меня есть файл конфигурации "admins.json" в корне моего приложения, содержащий следующее:

Я могу сделать следующее и легко получить данные из файла.

Теперь данные находятся и могут использоваться как обычный (или массив) объект.

Ответ 5

С установленным json-loader вы можете использовать

или, что еще проще

Ответ 6

//переименовать файл.json в.js и сохранить в папке src

Объявите объект json как переменную

Экспортируйте его с помощью module.exports

Из компонента, который нуждается в этом, убедитесь, что назад две папки глубоко

Я новичок в React и пытаюсь импортировать DATA переменную JSON из внешнего файла. Я получаю следующую ошибку:

Не удается найти модуль "./customData.json"

Кто-нибудь может мне помочь? Он работает, если у меня есть DATA переменная, index.js но не во внешнем файле JSON.

index.js hobbies.js profile.js customData.json

Один из хороших способов (без добавления поддельного расширения .js, предназначенного для кода, а не для данных и конфигураций) - использовать json-loader модуль. Если вы использовали create-react-app скаффолд для своего проекта, модуль уже включен, вам просто нужно импортировать свой json:

Этот ответ объясняет больше.

Странный. Когда я пытаюсь импортировать файл json create-react-app , он возвращается undefined ИМХО, этот другой ответ должен быть действительно принятым ответом. Это действительно решение, но только для подмножества приложений React - только для тех, которые были запущены с помощью create-react-app.

Этот старый каштан .

Короче говоря, вы должны использовать require и позволить узлу обрабатывать синтаксический анализ как часть вызова require, а не передавать его стороннему модулю. Вы также должны позаботиться о том, чтобы ваши конфигурации были пуленепробиваемыми, а это значит, что вы должны тщательно проверять возвращаемые данные.

Но для краткости рассмотрим следующий пример:

Например, предположим, что у меня есть файл конфигурации admins.json в корне моего приложения, содержащий следующее:

Обратите внимание на процитированные ключи, "userName" , "passSalted" !

Я могу сделать следующее и легко извлечь данные из файла.

Теперь данные есть и их можно использовать как обычный объект (или массив).

Однозначно правильный ответ. Не требуется сторонний модуль для чтения данных JSON. Двойные кавычки вокруг ключей необходимы для правильно отформатированного JSON. Также JSON не может иметь комментариев.

После json-loader установки вы можете использовать

Самый простой подход следующий

Сохраните файл JSON с расширением .js и убедитесь, что ваш JSON должен находиться в том же каталоге.

Для меня сработало следующее решение: - Я переместил свой файл data.json из src в общедоступный каталог. Затем использовал API-интерфейс fetch для получения файла

попробуйте с export default DATA или module.exports = DATA

ммм, вы пробовали использовать require вместо import? но я почти уверен, что проблема не в этом, путь правильный? ой и попробуйте также написать import DATA вместо customData.

// переименовать файл .json в .js и сохранить в папке src

Объявить объект json как переменную

Экспортируйте его с помощью module.exports

Из компонента, которому он нужен, убедитесь, что вы сделали резервную копию двух папок глубиной

import customData from '../customData';

Это хорошо сработало в React 16.11.0

есть несколько способов сделать это без использования стороннего кода или библиотек (рекомендуемый способ).

1-й СТАТИЧЕСКИЙ СПОСОБ: создайте файл .json, затем импортируйте его в свой пример реагирующего компонента.

мое имя файла - example.json

ключ example внутри example.json может быть любым, только помните, что используйте двойные кавычки, чтобы предотвратить проблемы в будущем.

Как импортировать в компонент React

и вы можете использовать его где угодно

Теперь нужно учесть несколько вещей. С помощью этого метода вы вынуждены объявить свой импорт вверху страницы и не можете ничего динамически импортировать.

А что насчет того, чтобы динамически импортировать данные JSON? например многоязычный сайт поддержки?

2 ДИНАМИЧЕСКИЙ СПОСОБ

1. объявите свой файл JSON точно так же, как в моем примере выше

но на этот раз мы импортируем данные иначе.

это можно получить таким же образом.

но подождите, а где же динамическая нагрузка?

вот как динамически загружать JSON

теперь убедитесь, что все ваши файлы JSON находятся в одном каталоге

здесь вы можете использовать JSON так же, как в первом примере

что изменилось? способ импорта, потому что это единственное, что нам действительно нужно.

React считается самой популярной библиотекой для создания интерактивных приложений. Однако, React не является полноценным web фреймворком. Она фокусируется только на одной части известной модели MVC - и это view (вид).

Существует целая React экосистема, направленная на решение других аспектов проекта. В этом уроке вы узнаете о работе с одним из самых базовых из них для любого web приложения - о том, как получать данные для отображения. И это не так уж и просто. Существует несколько мест в иерархии компонента React, где вы можете получать данные. Но когда именно это делать - уже другая история. Вам также нужно определить, какую технологию для получения данных использовать и где потом хранить эти данные.

К концу данного урока вы четко увидите, как работает получение данных в React, узнаете все за и против различных подходов и научитесь применять эти знания в ваших React приложениях.

С чего начать

Давайте создадим каркас нашего React приложения с помощью create-react-app:

В результате получаем достаточно продуманную структуру каталогов. Прочитайте замечательный файл README, если вы не знакомы с create-react-app.

Создание простого сервера

Я создал простой сервер для хранения и вывода цитат. Он не является основной темой этого урока, и его роль сводится к тому, чтобы предоставить удаленный API для демонстрации того, как получать данные в React. Чтобы удовлетворить ваше любопытство, скажу, что это приложение, написанное на Python 3 и основанное на фреймворке hug, созданное с использованием Redis в качестве постоянного хранилища.

Полный исходный код доступен на GitHub.

Знакомство с демонстрационным приложением

Демонстрационным выступает React приложение, которое обращается к сервису цитат, выводит все цитаты и позволяет добавлять новые.

Вот снимок экрана:

Структура приложения очень проста. Я начал с каркаса, созданного с помощью create-react-app и добавил два компонента в дочерней директории: QuoteList и AddQuoteForm. Вот как выглядит структура каталогов (за исключением node_modules):

Полный исходный код доступен на GitLab.

Отображение цитат

Функциональный компонент QuoteList выводит список цитат в виде обычного маркированного списка. Ему необходимо передать массив строк:

Этот компонент является дочерним основного компонента App.

Получение данных с помощью Fetch API

Fetch API является API, основанном на промисах, которое возвращает объект ответа. Для доступа непосредственно к JSON содержимому, необходимо вызвать метод json() возвращенного объекта.

Добавляем код получения данных

Конечно React полностью сводиться к компонентам. Но важным является и вопрос о том, в каком именно месте разместить код получения данных. Если вы правильно построите свой код, то должно получиться много компонентов общего назначения и только несколько компонентов для работы самого приложения. React и JavaScript в целом достаточно гибкие технологии, что делает возможным внедрение команд в любом месте.

Получение цитат с помощью REST API требует определенный вид периодичных запросов, поскольку я хочу, чтобы список цитат был всегда актуальным. Но важную роль играет и первоначальное получение данных. У компонентов React есть методы жизненного цикла, в которых можно применять команды, выполняемые в определенное время. Метод componentDidMount() вызывается, когда компонент становится доступным и его состояние изменилось. Это отличное место для выполнения получения данных.

Вот как это выглядит:

Если вы желаете сократить время загрузки первого шаблона, то можно задуматься об использовании componentWillMount() для асинхронного получения данных, но в таком случае получение данных может завершиться раньше того, как завершено монтирование компонента. Я такой подход не рекомендую.

Изучите Освоение Методов жизненного цикла React для более близкого знакомства.

Выбор частоты получения данных

Первоначальное получение данных в componentDidMount() работает хорошо, но мне бы хотелось обновлять список цитат почаще. В REST-подобном API единственным решением является периодический опрос сервера. Сервис цитат очень упрощен и потому всегда выдает список всех цитат.

Длительность подобных интервалов стоит определять, исходя из требований приложения. Если вам нужны обновления в реальном времени и(или) опросы сервера сильно нагружают ваш бэк-енд, то задумайтесь об использовании WebSockets вместо REST.

Справляемся с получением данных с длительным временем выполнения запроса

Иногда получение данных может занять долгое время. В таком случае стоит улучшить жизнь для пользователей с помощью отображения полосы прогресса загрузки или какой-либо анимации. Это особенно важно в случаях, когда получение данных вызвано по действию пользователя (например при нажатии на кнопку поиска).

Метод fetchQuotes() сам обновляет значение state.isFetching на true в момент начала запроса, и обратно на false, когда получение цитат завершено:

Работа с ошибками

Все, что я делаю для работы с ошибками в данном примере - это просто вывожу их в консоли. В зависимости от вашего приложения, вы можете вызывать повтор запроса, уведомлять пользователей или выводить альтернативный контент.

Fetch API или Axios

У fetch API имеется несколько недостатков. Он требует дополнительного действия для получения JSON из ответа. Также он не отлавливает все ошибки. Например, ошибка 404 возвращается как обычный ответ. Вам нужно самим проверять код ответа и разбираться с ошибками сети, которые были получены.

Таким образом вам придется обрабатывать ошибки дважды. Но вы можете воспользоваться библиотекой axios.js для решения этих проблем и получения более цельного кода, за что придется добавить еще одну внешнюю зависимость. Вот как выглядит код с axios:

Улучшений немного, но они очень полезны. Код для добавления новой цитаты тоже выглядит намного чище с axios. Вот версия fetch:

А вот версия axios:

Заключение

В этом уроке вы научились асинхронному получению данных в React приложении. Вы обсудили соответствующие методы жизненного цикла, опрос сервера, отслеживание прогресса загрузки и работу с ошибками.

Мы ознакомились с двумя библиотеками, основанными на промисах: fetch API и axios.js. Теперь пришло время создать замечательные React приложения, которые получают данные из удаленных API.

За последние несколько лет популярность React возросла. Кстати, у нас есть несколько продуктов, которые вы можете купить, просмотреть, применить и т.п. Если вы ищете дополнительные ресурсы по React, смело переходите по этой ссылке.

Итак, в предыдущем уроке мы изучили как читать файлы — как выводить в консоль их содержимое, и даже записали несколько файлов. Настало время овладеть еще двумя кейсами — работой с JSON файлами в node.js и работой с CSV.

Записываем json файл в node.js

Здесь все довольно просто. Вот таким кодом мы делали запись:

Ок. Что будет если мы попытаемся записать json файл?

Давайте возьмем для примера массив man:

Преобразуем в json строку и запишем тем же методом, что и раньше.

валидируем. Работает! Мы получили валидный json файл из массива с помощью node.js. Давайте теперь попробуем решить обратную задачу — как считать содержимое файла json в переменную. Это один из наиболее часто задаваемых вопросов при работе в javascript. Как только не мучаются фронтенд разработчики — все получается не очень, а все просто — чтение файлов прерогатива бекенда, итак, поехали.

Читаем файл json в node.js

Для начала комментируем предыдущую задачу, ведь мы не хотим, чтобы при запуске скрипта каждый раз перезаписывался файл man.json.

Теперь в нужном месте файла, там где мы хотим получить содержимое json напишем:

и мы получаем вывод:

Если мы выведим тип полученных данных console.log(typeof jsonData), то увидим - object т.е. нам не нужно проводить дополнительных преобразований. Итак, прочитать файл json в node.js и получить его в переменную — одна строка.

Несколько слов о require – это команда, которая позволяет подключать модули в node.js. Причем как встроенные, так и самописные, или установленные. Мы уже применяли данную команду для подключения модуля:

файловой системы и для путей. Теперь — мы просто применили данную команду для подключения json файла.

Итак, мы овладели первым кейсом, теперь переходим ко второму — запись и чтение CSV файлов.

Чтение CSV в node.js

Несколько слов о нудной теории — CSV это формат текстового файла, который позволяет хранить структурированные значения в формате строк и колонок, а данные отделены определенным символом. Я специально не упоминаю comma – разделитель запятую, поскольку формат позволяет разделять данные пробелом, точкой с запятой или табуляцией.

Мы будем для чтения CSV использовать сторонний модуль. Да, можно и самому написать код, но идеология ноды — пакеты. Поэтому начнем. Для начала установим csv-parser.

Обратите внимание, после выполнения команды у нас появилась папка node_modules где установлен csv-parser и необходимые зависимости. Да, иногда для одной операции в одну строку можно натянуть себе мегабайты пакетов.

После установки пакет нужно подключить. Надеюсь не забыли комментировать предыдущий код?

И мы получаем в переменной result массив из файла table.csv.

Итак, плюс один кейс.

Запись CSV файла

Как вы уже поняли, мощь node.js заключена в модулях. Установим модуль csv-writer:

И подключим его в коде:

Записывать чуть сложнее чем читать — для начала выполняем конфигурацию модуля.

Теперь давайте попробуем запись подобный файл. Как и в самом первом примере — создадим массив:

ну и отдадим команду записи:

результат — появление файла out.csv, открыв который увидим ожидаемую структуру. Остается проверить — открыть любым табличным редактором и убедиться что все работает.

Итак, мы овладели 4 основными кейсами работы с файлами — чтением и записью CSV и JSON файлов в Node.js.

Домашнее задание

Загрузка ДЗ на проверку возможна только после приобретения курса.

Создайте функцию f1, которая при запуске из массива ar1 создаем файл ar1.json в текущей папке.

Напоминаю - больше данных по задаче, правильное написание и логика - в шаблоне. Сдаем на проверку - только app.js

Создайте функцию f2, которая при запуске из массива ar2 создаем файл ar2.json в текущей папке.

Создайте функцию f3, которая при запуске выводит содержимое файла j3.json в консоль.

Читайте также: