Hantera API-data

API är ett kraftfullt sätt att hämta extern data till din hemsida, på så vid slipper du skapa den själv. I denna utmaning kommer du att hantera data från API:et SpaceEx – ett API som visar info om rymdraketer 🚀. Vi kommer särskilt kika på data om tidigare och kommande uppskjutningar, nu kör vi!

Det här behöver du

Du behöver en kodeditor, vi rekommenderar Visual Studio code som är helt gratis att använda och går att ladda ned här.

Få hjälp

Gå med i vår Slack kanal och få hjälp av hela vårt community och hjälp coacher. Gå med här.

1. Så här startar du

Ladda ned kodfilerna här till din email och öppna i din kodeditor. Inuti filerna hittar du vidare instruktioner och kommentarer om hur du går tillväga för att lösa utmaningen, i nästa stycke hittar du dessutom grymma tips och trix!

2. Tips & trix

Läs dokumentationen om API:et du kommer att använda i utmaningen. Vi använder oss av endpointen som heter Launches.
Ta en uppfräshare om JavaScript Arrayer här och JavaScript Objects här för att kunna hantera och sortera din data.
Förstå hur datan är strukturerad genom att läsa på om JSON.
Fräscha upp minnet om DOM, document.querySelector() och innerHTML för att hänga med på hur vi får datan från JavaScript till HTML:en.
Läs om if/else för att förstå checkSuccess-funktionen vi skapat som ett exempel på hur du kan välja att visa olika saker beroende på vissa villkor.
Djupdykning: Läs steg-för-steg om hur JavaScript-metoden fetch() fungerar.

3. Inspiration

5 populära öppna API:er du kan använda helt gratis

Är du helt säker på vad API är och dess möjligheter? Kolla in vår artikel där vi förklarar begreppet, ger exempel och dessutom ger dig de mest populära öppna API:erna – som även du kan använda dig utav!

👉 Läs hela artikeln om API:er här

4. Dela din lösning

Självklart vill vi se din lösning, dela den gärna på vår Instagram under hashtaggen #kodutmaningen. Och du, passa på att utmana din vän – dela kodutmaningen 💪.