Lektionsmaterial

Lär dig jobba med APIer i JavaScript

Vad är ett API?

APIer är en av de viktigaste byggstenarna när man arbetar med programmering. De är ett sätt för appar eller hemsidor att hämta data från olika källor för att sedan visa upp det för användaren. Om vi tittar på denna vy från hemsidan Blocket till exempel:

Blocket

Här ser vi en lista med annonser, men var kommer egentligen annonserna ifrån? Jo, Blocket har ett API som hemsidan hämtar sin data ifrån, formaterar den snyggt och visar den för dig som besökare. Den data som utgör annonserna du ser i bilden skulle kunna se ut såhär t.ex.

[
    {
        "namn": "Volvo 245",
        "år": "1988",
        "bränsle": "Bensin",
        "miltal": "35000 - 39999",
        "växling": "Manuell",
        "pris": 3000
    },
    {
        "namn": "Volvo 940 Turbo+ 190hk Ny-bes, nyservad",
        "år": "1993",
        "bränsle": "Bensin",
        "miltal": "45000 - 49999",
        "växling": "Manuell",
        "pris": 36500
    }
]

Känner du igen det du ser i rutan från det du ser i bilden? Detta är hur all information på Blockets hemsida ser ut innan den visas för dig och andra besökare. Detta format kallas för JSON - JavaScript Object Notation - och kommer från början från programmeringsspråket JavaScript.

I rutan har vi alltså en lista med två objekt.

Det som händer när du går in på en sida som Blocket kan enkelt beskrivas såhär:

  1. Du skriver in Blocket.se i din webbläsare
  2. Blocket.se tar emot ditt besök och anropar sedan ett API för att hämta annonserna som ska visas på sidan
  3. APIet svarar med till exempel data som ser ut som i rutan ovan
  4. Blocket presenterar datan i snygga tabeller och med länkar
  5. Sidan har laddat klart

Allt detta händer alltså på under en sekund varje gång någon går in på Blocket.

Jobba med APIer i JavaScript

Nu ska vi testa att hämta data från ett API i JavaScript. APIer har precis som hemsidor en adress som man använder för att anropa APIet. Istället för att svara med en snygg hemsida svara APIer i de flesta fall med JSON som vi gick igenom ovan. APIet vi ska använda i denna övning har adressen https://mocki.io/v1/2d7d5fc7-2743-4ca3-b0f8-c92aba271511 och svarar med datan vi visade ovan.

För att använda ett API kan vi börja med en enkel hemsida. Skapa en fil som heter hemsida.html och spara den på din dator. Öppna den sedan i Notepad eller någon annan textredigerare och klistra in HTML-koden nedan för att få en grund att börja med.

<html>
  <body>
    <div id="ruta" style="background-color: grey">
        <p>I denna ruta kan man visa saker</p>
    </div>
    <script>
        // Här kan man skriva JavaScript
    </script>
  </body>
</html>

Spara filen och öppna filen med en webbläsare genom att högerklicka på den. Du bör då se en grå ruta med texten “I denna ruta kan man visa saker”.

Nu kan vi börja anropa vårt API för att visa datan!

I JavaScript finns det ett inbyggt verktyg som heter fetch som vi kan använda för att hämta data från ett API. Såhär kan vi hämta data med hjälp av adressen till vårt API:

fetch('https://mocki.io/v1/2d7d5fc7-2743-4ca3-b0f8-c92aba271511')
  .then(response => response.json())
  .then(data => document.getElementById("ruta").innerHTML = data);

Låt oss bryta ner koden i mindre delar för se vad det är som händer här.

Om vi lägger in koden i vår HTML-fil ser det ut såhär:

<html>
  <body>
    <div id="ruta" style="background-color: grey">
        <p>I denna ruta kan man visa saker</p>
    </div>
    <script>
        fetch("https://mocki.io/v1/2d7d5fc7-2743-4ca3-b0f8-c92aba271511")
            .then(response => response.json())
            .then(data => document.getElementById("ruta").innerHTML = data);
    </script>
  </body>
</html>

Lägg in JavaScript-koden som ovan och ladda om sidan och du bör se datan från APIet på din sida! Nu kan du experimentera med att lägga in datan i en tabell och göra det lika snyggt som på Blocket.