Dati da API Esterni

Codegrind Team•Jul 21 2022

Traccia

Lo scopo di questo esercizio è quello di prendere dati da API esterni gratuiti ed utilizzarli per popolare la nostra applicazione. In questo caso utilizziamo API per recuperare la lista di tutte le razze di cani e mostrarle in una select. Selezionando una razza di cane devono essere generate automaticamente le card con le immagini ottenute dagli API in ordine casuale.

Gli api a cui dovete fare rifermento sono su Dog.ceo

Dovete leggere la documentazione e capire come strutturale le select con tutte le razze e richiedere le immagini per ciascuna razza scelta.

Soluzione

Pagina HTML

<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <select id="breeds" name="breeds"></select>
    <div id="container" class="flex flex-wrap m-10 p-10 gap-4"></div>
    <script src="script.js"></script>
  </body>
</html>

Pagina Script.js

Fetch dei dati iniziale

const select = document.getElementById("breeds");
const container = document.getElementById("container");

fetch("https://dog.ceo/api/breeds/list/all")
  .then((response) => response.json())
  .then((data) => {
    const obj = data.message;
    Object.keys(obj).forEach((key) => {
      if (obj[key].length == 0) {
        createOption(key);
      } else {
        obj[key].forEach((element) => {
          createOption(`${element} ${key}`);
        });
      }
    });
    caricaDati(select.value);
  });

Event listener sulla Select

select.addEventListener("change", (e) => {
  while (container.firstChild) {
    container.removeChild(container.firstChild);
  }
  console.log(e.target.value);
  caricaDati(e.target.value);
});

Funzione per creare le opzioni della select

function createOption(value) {
  const option = document.createElement("option");
  option.value = value;
  option.appendChild(document.createTextNode(value));
  select.appendChild(option);
}

Funzione per caricare i dati

function caricaDati(breed) {
  if (breed == "") return;
  fetch(`https://dog.ceo/api/breed/${breed}/images`)
    .then((response) => response.json())
    .then((data) => {
      console.log(data);
      generaCard(data.message);
    });
}

function generaCard(photos) {
  photos.sort(() => Math.random() - 0.5);
  photos.forEach((photo) => {
    const card = document.createElement("div");
    card.className =
      "rounded-xl shadow-xl text-xl bg-white h-[200px] w-[200px] bg-cover";
    card.style.backgroundImage = `url(${photo})`;
    // card.style.background
    container.appendChild(card);
  });
}