Visualizzare dati da API in Svelte

Di default Svelte non ha una libreria specifica per eseguire richieste HTTP; nel senso che usa quella standar di Javascript: fetch!

Ovviamente potete usarne anche altre; in questo articolo vediamo come usare fetch per recuperare dati da una API e visualizzarli in tabella.

Metto tutto insieme per facilità di codice:

<script lang="ts">
  import {onMount} from "svelte";

  let libri: any[] = [];

  onMount(async () => {
    const url = "https://www.mattepuffo.com/api/book/get.php";
    const resp = await fetch(url);
    const data = await resp.json();
    libri = data.books;
  });
</script>

<svelte:head>
  <title>HOME</title>
</svelte:head>
<table>
  <thead>
    <tr>
      <th>
        Titolo
      </th>
    </tr>
  </thead>
  <tbody>
    {#each libri as libro}
      <tr>
        <td>{libro.title}</td>
      </tr>
    {/each}
  </tbody>
</table>

Come potete vedere i dati ci vengono restituiti all'interno di un array di nome books; questa cosa, sicuramente, potrebbe cambiare.

Ma non dovreste avere problemi, in quanto vi basterà cambiare questa riga:

libri = data.books;

// AD ESEMPIO IL CLASSICO
libri = data.data;

// OPPURE
libri = data;

Enjoy!