Создание раскрывающегося списка выбора валюты в приложении React из одного объекта JSON

Под капотом

Я создавал редактор счетов в реальном времени для продукта Свидетельские счета. Нам нужно было добавить раскрывающееся меню выбора валюты, чтобы пользователи могли выбирать, с какой валютой они предпочитают совершать транзакции. Тогда мы столкнулись с проблемой при разработке, и в итоге мы сопоставили валюты всего мира, чтобы создать простой выпадающий селектор валют.

Извините, что прерываю, но это для тех, кто еще не подписался на меня, и для новых читателей. Остановите повторяющийся процесс установки сторонних библиотек во фронтенде и загрузите предустановленные репозитории по ссылке ниже.

https://ihatereading.in/repos

В настоящее время мы предоставляем репозитории только для Next.js, но в будущем мы также коснемся CRA и фреймворка Gatsby.

Начиная

Идея состоит в том, чтобы создать простой раскрывающийся список валют с соответствующим им символом. Это упрощает все для пользователя, предотвращая ошибки путем добавления пользователем неправильного символа валюты.

Мы будем использовать выбранный элемент HTML и сопоставив список валют.

Подход

  • Мы будем использовать список валют как объект JSON.
  • Импортируйте объект JSON валют в компонент
  • Сопоставьте каждую валюту, чтобы создать параметр для элемента выбора
  • После использования измените валюту, обновите пользовательский интерфейс соответствующим образом

Объект JSON

JSON-объект валюты можно найти по ссылке ниже.

https://gist.github.com/Fluidbyte/2973986

Загрузите файл JSON по указанной выше ссылке, это будет наш единственный объект JSON для создания всего раскрывающегося меню выбора валюты.

Написание кода

После загрузки указанного выше объекта JSON нам просто нужно импортировать его и сопоставить каждый элемент объекта JSON, чтобы создать раскрывающийся список.

Каждому объекту JSON понравится -

"USD": {  
   "symbol": "$",  
   "name": "US Dollar",  
   "symbol_native": "$",  
   "decimal_digits": 2,  
   "rounding": 0,  
   "code": "USD",  
    "name_plural": "US dollars" 
}

Мы покажем код пользователю, и символ будет значением для наших опций элемента select.

Я буду использовать Tailwind CSS и Next JS для создания нашего компонента выбора валюты.

Вы можете скачать репозиторий отсюда https://ihatereading.in/repos

Мы сопоставим каждый объект JSON с валютой и просто отобразим пункт меню с символом в качестве значения и кодом в качестве ключа.

<MenuItem 
  value={currencies[item].symbol}
> 
  {currencies[item].symbol}
</MenuItem>

Для сопоставления объекта валют мы используем метод Javascript Object.keys.

Вот как будет выглядеть весь наш элемент Select -

Я использую Material-UI, поэтому я использовал другие типы элемента Select, такие как обрисованный в общих чертах, и мой конечный продукт выглядит так:

Окончательный код

Заключение

Мы только что использовали один единственный объект JSON из сути и сопоставили валюты, чтобы создать раскрывающийся список валют. Это делает все настолько простым. Если вы не хотите импортировать объект JSON во внешний интерфейс, мы можем просто загрузить этот файл в базы данных и создать конечную точку для получения валют с помощью конечной точки во внешнем интерфейсе, что снова является простым способом выполнить это. Я постараюсь осветить статью о создании конечных точек для создания выпадающего меню валюты.

Code - https://github.com/shreyvijayvargiya/iHateReadingLogs/tree/main/TechLogs/CurrencySelect
Docs - https://ihatereading.in/projects/search-currency?type=%22introduction

До скорого. Хорошего дня, народ.

Больше контента на plainenglish.io