Usare fetch con Alpine.js

Mattepuffo's logo
Usare fetch con Alpine.js

Usare fetch con Alpine.js

Programmazione, Javascript - AJAX

Alpine.js è un leggero framework per Javascript che ci consente di avere molte interazioni con l'HTML senza dover installare librerie/framework più pesanti.

Tra l'altro non richiede dipendenze esterne, e non necessita di Node.js.

Di primo acchitto vi dico che lo userei su progetti relativamente piccoli.

Però ha un sacco di chicche interessanti.

In questo articolo vi mostro come usare fetch per recuperare dati in formato JSON da una API, e poi mostrarli nella pagina:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>TEST</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  </head>

  <body>
    <div x-data="initData()" x-init="getData()">
      USERS LIST
      <ul>
        <template x-for="item in items" :key="item.id">
          <li>
            <span class="" x-text="item.titolo"></span>
          </li>
        </template>
      </ul>
    </div>

    <script>
      function initData() {
        const url = "https://www.mattepuffo.com/api/blog/articoli/get.php?last=10";
        return {
          isLoading: false,
          items: [],
          getData() {
            this.isLoading = true;
            fetch(url)
                .then((response) => response.json())
                .then((data) => {
                  this.items = data.articoli;
                  this.isLoading = false;
                });
          }
        }
      }
    </script>

  </body>

</html>

Enjoy!

Condividi

Commentami!