JavaScript Modul 4: API-er og ekte data fra nettet

1. Hva er et API egentlig?

Et API er en måte å spørre en server om informasjon på. Du sender en forespørsel til en adresse, og serveren svarer med data. Tenk på det som en meny på en restaurant: du får ikke alt, bare det du faktisk bestiller.

Typisk arbeidsflyt:

1. Finn dokumentasjonen til API-et.
2. Se hvilke data som finnes.
3. Bygg riktig URL med riktige parametere.
4. Bruk fetch().
5. Se på JSON-svaret.
6. Plukk ut det du trenger og vis det på nettsiden.

2. Eksempel: Open-Meteo

Open-Meteo er et fint første API fordi det ikke krever API-nøkkel, og fordi svaret er ryddig. Dokumentasjonen viser at du kan be om både current og hourly data, og at hourly-parameteren kan inneholde flere verdier separert med komma.

async function hentVaer() {
  const url = "https://api.open-meteo.com/v1/forecast?latitude=59.7439&longitude=10.2045¤t=temperature_2m,weather_code,wind_speed_10m";

  const response = await fetch(url);
  const data = await response.json();

  console.log(data);
}

Her er poenget ikke bare å få data, men å forstå strukturen. Se i Console og finn ut hvor temperaturen faktisk ligger.

3. API-er du kan bruke

6. Starterkode: én knapp som henter noe fra et API

Dette er et veldig fint startpunkt:

// HTML du trenger:
// <button id="catBtn" class="btn btn-primary">Hent katt</button>
// <img id="catImg" class="img-fluid rounded mt-3" alt="Kattebilde">

const catBtn = document.getElementById("catBtn");
const catImg = document.getElementById("catImg");

async function hentKatt() {
  const response = await fetch("https://api.thecatapi.com/v1/images/search");
  const data = await response.json();

  catImg.src = data[0].url;
}

catBtn.addEventListener("click", hentKatt);

7. Litt mer ryddig: bruk funksjoner

Når du bruker flere API-er, blir koden fort rotete. Del derfor opp i funksjoner.

async function hentHund() {
  const response = await fetch("https://dog.ceo/api/breeds/image/random");
  const data = await response.json();
  return data.message;
}

async function visHund() {
  const bildeUrl = await hentHund();
  document.getElementById("dogImg").src = bildeUrl;
}

Her gjør hentHund() én jobb: hente data. visHund() gjør en annen jobb: vise data.

8. Feilhåndtering: viktig når du jobber med nettet

API-er virker ikke alltid. Derfor bør du bruke try/catch.

async function hentLand() {
  try {
    const response = await fetch("https://restcountries.com/v3.1/name/norway");
    const data = await response.json();

    document.getElementById("landInfo").textContent =
      `${data[0].name.common} har hovedstaden ${data[0].capital[0]}.`;
  } catch (error) {
    document.getElementById("landInfo").textContent =
      "Noe gikk galt. Prøv igjen.";
    console.error(error);
  }
}