Работа с API

В моем первом проекте требовалось создать фронтенд-интерфейс на javascript, использующий какой-либо API. Изначально я планировал использовать API Marvel Comics, но это заняло бы больше времени, чем было целесообразно для данного проекта. Поэтому я выбрал Open Brewery DB, базу данных, в которой перечислены все пивоварни в Соединенных Штатах.

API достаточно прост и предоставляет вам конечные точки, позволяющие искать пивоварни по штату, городу или типу — среди прочих. Однако я быстро столкнулся с проблемой, когда захотел вернуть результаты со всех страниц, полученных от конечной точки. Если бы я вывел и отобразил все, что вернула конечная точка, то в итоге получил бы пустые списки, поскольку на последней странице может быть только 5 из 50 возможных результатов (на странице). Что делать? Что делать?

Я решил, что лучшим способом будет отфильтровать все результаты, которые были пустыми/нулевыми. Таким образом, я мог запросить все 50 страниц, которые может вернуть API, а затем удалить все нулевые объекты. Это было немного некрасиво, так как мне пришлось вручную задавать количество страниц, которые он будет просматривать, но, похоже, это работает для создания минимального жизнеспособного продукта (MVP). Итак, как это работает?

Система способна возвращать результаты для 50 страниц. Однако очень немногие результаты содержат более 3 страниц, не говоря уже о 20 или 30. Один из аргументов, который я передал функции Promise, представляет собой карту целых чисел. Каждое целое число представляет собой номер страницы, возвращенной из конечной точки. Я установил максимальное значение 15. Затем я использовал интерполяцию, чтобы функция map вставила номер страницы в конечную точку Open Brewery API следующим образом:

fetch(`https://api.openbrewerydb.org/breweries?${usrInput.value}&per_page=50&page=${id}`)

Вход в полноэкранный режим Выйти из полноэкранного режима

интерполированная строка usrInput принимает в качестве аргумента поисковый запрос пользователя. Следующим шагом было избавление от пустых объектов, возвращаемых API. Следующий код отфильтровывает все объекты с 1 или более возвращаемыми элементами:

let results = data.filter(item => item.length > 0)[i - 1];

breweries.push(results.filter(Boolean));

Войти в полноэкранный режим Выйти из полноэкранного режима

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

Сделайте его красивым

Руководство проекта требовало, чтобы мы написали три слушателя событий. Поэтому, в дополнение к слушателю событий на кнопке отправки формы, я создал один для лайков пивоварни и один для модального окна, в котором появляется ссылка на веб-страницу пивоварни.

Модальное окно было создано с помощью Bootstrap 5 от Twitter. Я не буду углубляться в эту тему, поскольку в интернете есть много информации о Twitter Bootstrap. Кнопка «Мне нравится» в любом случае более интересна для обсуждения.

Для кнопки «Мне нравится» я использовал иконки Font Awesome. Я думал об использовании бесплатных или с открытым исходным кодом, но у них нет и близко такого количества иконок (и вариантов иконок), как у Font Awesome.

После вывода результатов поиска html-элементов я закодировал захват всех сердец ( let hearts = Array.from(document.querySelectorAll('.fa-heart')); ), которые были созданы и добавлены на страницу с помощью javascript. Затем каждое сердце может быть преобразовано для работы в качестве кнопки «Мне нравится». Следующий код включает функцию «мне нравится»:

hearts.forEach(heart => {                         
  heart.addEventListener('click', (e) => {
    let classList = 
    Array.from(heart.classList);
      if (classList.includes('fa-solid')) {
        heart.classList.remove('fa-solid');
        heart.classList.add('fa-light');
      } else {
        heart.classList.remove('fa-light');
        heart.classList.add('fa-solid');
      }
   })
})
Войти в полноэкранный режим Выйти из полноэкранного режима

Это тоже довольно просто. Когда используется предыдущая функция forEach, она перебирает все сердечки, отображенные на странице, и добавляет слушателя событий. Он прослушивает нажатие на сердце и меняет полное сердце на очерченное — и наоборот, если вы хотите что-то изменить.

Исправление ошибок

Были и другие функции, которые я добавил в систему поиска, но их пришлось удалить, потому что у меня не было времени на исправление ошибок. Например, мой ранний код позволял пользователю искать по штату и типу пивоварни. К сожалению, этот код создавал некоторые проблемы с пользовательским интерфейсом, в частности с модальными диалоговыми окнами. Я думаю, что одним из ключевых моментов в исправлении этой функциональности будет генерация уникальных идентификаторов для каждого модального окна и связанного с ним результата по пивоварне на странице. Это позволит избежать проблемы одинакового ID, когда пивоварня имеет два или более мест (я создавал ID, используя первые несколько символов в названии пивоварни). Придется подождать до другого раза!

Оцените статью
devanswers.ru
Добавить комментарий