Desta vez aprenderemos como buscar dados da API usando Alpine JS. Criaremos um site que exibirá uma lista de clubes de futebol que jogam na Premier League inglesa extraída da seguinte API.

Alpine JS é uma estrutura Javascript leve que podemos usar para criar sites interativos sem precisar usar estruturas como React ou Vue. Ao usar Alpine JS, podemos facilmente aplicar propriedades Javascript diretamente em arquivos HTML sem precisar escrevê-los separadamente.

Por favor, crie um arquivo HTML com o nome index.html e cole o seguinte código.

A seguir, criaremos um componente de cartão usando Tailwind CSS.

Em seguida, buscaremos os dados e os exibiremos no componente do cartão.

Feliz! Você buscou a API com sucesso usando Alpine JS e a exibiu ao usuário. Aqui estão os resultados.

A seguir está uma explicação do código criado.

x-data para acomodar a lógica de dados Javascript para execução diretamente na tag HTML. Neste código criamos uma variável chamada equipes que possui o tipo de dados array. Esta variável tem como objetivo armazenar os dados da busca de resultados na função.

x-init tem como objetivo realizar a inicialização antes do componente ser carregado. Neste código, inserimos uma função fetch que visa recuperar dados do endpoint da API que preparamos anteriormente. Então, antes que a página do navegador seja exibida, o Alpine JS realizará um processo de busca nos bastidores e, em seguida, os resultados da busca serão coletados na variável de equipes que foi declarada no início.

x-for é usado para realizar o processo iterativo da variável equipes e depois colocá-lo de volta na variável equipe.

x-bind para exibir imagens e x-text para imprimir dados diretamente na exibição HTML.