Esta vez aprenderemos a obtener datos de la API utilizando Alpine JS. Crearemos un sitio web que muestre una lista de clubes de fútbol que juegan en la Premier League inglesa extraída de la siguiente API.

Alpine JS es un framework Javascript liviano que podemos usar para crear sitios web interactivos sin tener que usar frameworks como React o Vue. Cuando usamos Alpine JS, podemos aplicar fácilmente propiedades de Javascript directamente en archivos HTML sin necesidad de escribirlos por separado.

Cree un archivo HTML con el nombre index.html y luego pegue el siguiente código.

A continuación crearemos un componente de tarjeta usando Tailwind CSS.

Luego buscaremos los datos y los mostraremos en el componente de la tarjeta.

¡Feliz! Obtuvo exitosamente la API usando Alpine JS y se la mostró al usuario; aquí están los resultados.

La siguiente es una explicación del código creado.

x-data funciona para acomodar la lógica de datos de Javascript para que se ejecute directamente en la etiqueta HTML. En este código creamos una variable llamada equipos que tiene el tipo de datos matriz. Esta variable tiene como objetivo retener datos de la obtención de resultados en la función.

x-init tiene como objetivo realizar la inicialización antes de que se cargue el componente. En este código, insertamos una función de recuperación que tiene como objetivo recuperar datos del punto final API que hemos preparado previamente. Luego, antes de que se muestre la página del navegador, Alpine JS llevará a cabo un proceso de búsqueda entre bastidores y luego los resultados de la búsqueda se recopilarán en la variable de equipos que se declaró al principio.

x-for se utiliza para realizar el proceso iterativo de la variable equipos y luego volver a colocarlo en la variable equipo.

x-bind para mostrar imágenes y x-text para imprimir datos directamente en la pantalla HTML.