На этот раз мы научимся получать данные из API с помощью Alpine JS. Мы создадим веб-сайт, на котором будет отображаться список футбольных клубов, играющих в английской Премьер-лиге, взятый из следующего API.

Alpine JS — это легкая среда Javascript, которую мы можем использовать для создания интерактивных веб-сайтов без необходимости использования таких платформ, как React или Vue. При использовании Alpine JS мы можем легко применять свойства Javascript непосредственно в файлах HTML без необходимости писать их отдельно.

Создайте HTML-файл с именем index.html, затем вставьте следующий код.

Далее мы создадим компонент карточки с помощью Tailwind CSS.

Затем мы получим данные и отобразим их на компоненте карты.

Счастливый! Вы успешно получили API с помощью Alpine JS и отобразили его пользователю, вот результаты.

Ниже приводится объяснение созданного кода.

x-data функции для размещения логики данных Javascript для запуска непосредственно в теге HTML. В этом коде мы создаем переменную с именем Teams, которая имеет массив типов данных. Эта переменная предназначена для хранения данных, полученных при получении результатов в функции.

x-init предназначен для выполнения инициализации до загрузки компонента. В этот код мы вставляем функцию выборки, целью которой является получение данных из конечной точки API, которую мы подготовили ранее. Затем, прежде чем отобразится страница браузера, Alpine JS незаметно выполнит процесс выборки, а затем результаты выборки будут собраны в переменную Teams, которая была объявлена ​​в начале.

x-for используется для выполнения итерационного процесса над переменной Teams и последующего помещения ее обратно в переменную Team.

x-bind для отображения изображений и x-text для печати данных непосредственно в HTML-дисплее.