Hent og vis data fra et REST-API i DOM'en

1. 01

   Kend endpointet

   Find API'ets URL, HTTP-metode (typisk GET til at hente), og hvordan svaret ser ud. Prøv kaldet af i browseren eller et værktøj som Postman først, så du ved præcis hvilke felter du får igen, før du koder mod det.

2. 02

   Lav kaldet med fetch og async/await

   Skriv en `async`-funktion og kald `const svar = await fetch(url)`. `await` gør, at koden venter på nettets svar uden at fryse siden. Læg kaldet i en `try/catch`, så du kan fange netværksfejl.

3. 03

   Tjek statuskoden før du bruger data

   `fetch` fejler ikke automatisk på 404 eller 500 — tjek `svar.ok` (eller `svar.status`) og kast en fejl hvis den er falsk. Ellers risikerer du at forsøge at vise en fejlside som var den data.

   OK200Findes ikke404Serverfejl500

   2xx = gik godt · 4xx = klientfejl (din forespørgsel) · 5xx = serverfejl.

4. 04

   Læs svaret som JSON

   Parse data med `const data = await svar.json()`. Nu har du et JavaScript-objekt eller -array, du kan arbejde med. Log det gerne i konsollen første gang, så du bekræfter strukturen matcher det, du forventede.

5. 05

   Byg indholdet ind i DOM'en

   Løb data igennem og opret elementer — fx med `document.createElement` eller ved at sætte `textContent`. Undgå at indsætte rå tekst fra API'et som HTML, så du ikke åbner for injektion; brug `textContent` frem for `innerHTML` til brugerdata.

6. 06

   Håndtér ventetid og fejl for brugeren

   Vis en «Henter…»-tilstand mens kaldet kører, og en venlig fejlbesked i `catch`-blokken hvis noget går galt. En bruger skal aldrig se en blank side, der bare hænger — de skal vide, om der sker noget.

Bygget på uddannelsens artikler «Web-API'er i dybden — HTTP, REST og statuskoder» og «JavaScript og DOM» samt god faglig praksis i faget.