Skip to content
Kursen webtec

Fetch API (kmom05) ⚠️

I den här uppgiften ska vi använda data utifrån. Datan hämtas via http-protokollet med hjälp av fetch och vi ska använda datan för att populera en tabell.

Förutsättning

Det förutsätts att du gått igenom artiklarna för kursmomentet samt är det en fördel om du gjort tidigare kursmoment. De ger dig koll på hur vi börjar jobba med JavaScript och webbläsaren.

Intro

Du ska bygga en applikation som belyser bland annat länders utsläpp av koldioxid. Du ska jämföra data för länderna Sverige, Norge och Danmark.

Datan som ska användas kommer från “Our World In Data (owid)”.

I koden ska vi använda Fetch API och hämta filerna från github på följande länk:

https://raw.githubusercontent.com/bth-webtec/teacher/refs/heads/main/kmom05/data/<filename>.json

Tänk på att <filename> byts ut mot landet du vill hämta (sweden, norway, denmark).

Datan innehåller en hel del nycklar och värden och du kan se en lista på dem i owid’s gitrepo.

Bra. Då har du nog allt du behöver för att gå igenom kraven.

Krav

Generell struktur

Du jobbar i mappen public/.

  1. Skapa filen public/fetch.html och lägg till menyvalet i navbaren likt tidigare.

  2. Skapa filen public/js/fetch.js och läs in den i fetch.html. Det är “startfilen” för din JavaScript.

  3. Skapa filen public/css/fetch.css som sköter stylen för uppgiften.

När du är klar bör du ha följande filer, tillsammans med dina tidigare:

  • Directorypublic
    • Directoryjs
      • fetch.js
    • Directorycss
      • fetch.css
    • fetch.html

1. Hämta datan

  1. Användaren ska via ett select element och en eventlyssnare kunna hämta data från alla filer. När man väljer ett årtal ska funktionen fetchData() triggas.
  2. Filerna ska hämtas med fetch API.
  3. Använd async/await för att invänta datan.
  4. Man ska bara kunna välja år mellan 1900 och 2019.

2. Presentera datan

  1. Datan ska presenteras i en tabell med minst tre kolumner förutom landets namn.
  2. Välj ut minst ett värde som ska jämföras och “vinnarens” cell ska markeras, tex grön bakgrundsfärg.

Validering

Avslutningsvis

Lycka till och hör av dig om du kör fast eller har några funderingar.