Одна концепция, которая изначально доставляла мне много хлопот, заключалась в динамическом создании карточек путем получения данных API. Мне было немного трудно уложить это в голове! Просто казалось, что куча функций делает разные вещи. Как они все относились? Откуда можно знать, как спланировать что-то подобное? Однако теперь я создаю карты, как будто это моя вторая натура! Победа! Так как же начинается этот процесс?
Я начал с поиска API для работы. Я люблю покемонов и игры с покемонами, поэтому, естественно, я выбрал PokeApi!
Таким образом, этот API имеет URL-адрес, начинающийся с https://pokeapi.co/api/v2/». Следующей частью, которую нужно ввести для доступа к данным, будет конечная точка, такая как pokemon/1. Есть и другие пути, но это основной путь, по которому я пошел. Чтобы убедиться, что я могу получить доступ ко всему набору данных для каждого объекта, я использовал интерполяцию для идентификатора покемона, чтобы я мог передать идентификатор для любого выбранного покемона!
Я начал с создания простого запроса на выборку! Сначала я получил свои данные, а затем взял эти данные и преобразовал их в формат JSON. Прежде чем я сделал что-то еще, console.log показал мне данные API, чтобы я мог решить, что я хочу с ними делать! Также полезно знать, что вы только что сделали выборку правильно и что с данными можно работать.
Итак, после того, как эти данные были возвращены, я решил, какие элементы я хочу создать для своих карточек из ключей объектов. Было возвращено много данных, поэтому я просмотрел их, чтобы посмотреть, что сработает. Ключами, которые я выбрал, были «имя», «спрайты» и «типы», просто чтобы упростить задачу и заинтересовать пользователя;
После этого было самое интересное! Создание карты! Для этого я создал функцию рендеринга, которая затем пропускала через нее каждый из объектов покемонов. Затем я создал несколько элементов с помощью document.createElement, div, h2, img и h5 и сохранил их в переменных. Я выбрал простые имена для своих переменных, чтобы понять, для чего все используется. Я использовал «pCard» для всей карты, а «name», «img» и «type1» были использованы для элементов, которые я хотел отобразить на ней.
Затем я добавил некоторые атрибуты с нотацией точка/скобка, передав свойства из объектов API моим вновь созданным элементам, такие как «имя» и «тип». Я назначил некоторый textContent и несколько классов для выбора элементов в будущем. Использование классов для карточек полезно для выбора их всех сразу.
Чтобы получить доступ к этой информации, мне пришлось использовать запись через точку. Однако! Некоторые из этих свойств было немного сложно получить с помощью точечной нотации, поэтому я использовал скобочную нотацию для доступа ко всему, чего она не могла достичь. Как видно на рисунке ниже, когда я хотел получить доступ к определенным изображениям из данных, я использовал запись скобок для доступа к вложенным данным для моих изображений. Я также решил добавить забавный прослушиватель событий, в котором карта удаляется, если на нее щелкнуть! Затем я закончил с атрибутами, добавил все элементы к карте (div) и, наконец, добавил эту карту к существующему div в html. Мне нравится думать о «pCard» как о доске, и добавление на нее этих элементов похоже на прикрепление к ней заметок с сообщениями на заметках. Прохладный!
Последним шагом в этом процессе было перебор всех данных! Я решил отобразить 24 элемента на странице, чтобы предотвратить медленную загрузку страницы, поэтому мой цикл for выглядел так:
Обратите внимание, как я начал свой цикл с 1! Это связано с тем, что мои данные начинались с идентификатора 1, и поскольку мне нужно было 24 карты, я установил свой цикл на STOP, прежде чем он создал 25 карт, установив i на ‹ вместо ≤!
Мой процесс (после того, как каждая часть была завершена) заключался в вызове цикла for для данных, которые возвращала моя функция выборки, а затем динамическом создании карточек для каждого элемента, возвращаемого из данных. Затем я использовал прослушиватель событий DOMContentLoaded для вызова моей функции цикла при загрузке страницы, чтобы пользователь сразу мог видеть карты! Первые несколько раз делать карты было определенно непросто, но после второго или третьего раза я почувствовал, что все становится намного проще! Я надеюсь, что этот блог поможет людям лучше понять, как пройти этот процесс! Какие карты вы бы сделали?
