Voorbeeld uit theorieles
Tijdens de theorieles kwam volgend voorbeeld aan bod
<!DOCTYPE html>
<html lang="nl-BE">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API</title>
<script>
fetch('https://reqres.in/api/users')
.then(function(response) {
// nakijken of de API-call een antwoord terugstuurt
if (response.ok) {
// als de status "ok" (=200) is, dan wordt het antwoord omgezet in JSON
return response.json();
} else {
// als de status niet "ok" is, geef dan de status terug en annuleer het uitvoeren
return Promise.reject(response.status);
}
})
.then(function(response) {
// lees het volledige antwoord uit in de console
console.log(response);
// neem 2 HTML-elementen vast
let userContainer = document.getElementById("user");
let imgContainer = document.getElementById("image");
// Hiermee kan je door alle data van het antwoord lussen en deze uitlezen in de console
response.data.forEach(element => {
console.log(element.avatar);
});
// Plaats van de eerste gebruiker de naam en de afbeelding in HTML
userContainer.textContent = response.data[0].first_name + " " + response.data[0].last_name;
imgContainer.src = response.data[0].avatar;
})
.catch(function(error) {
// indien er een fout is, toon in de console dan wat er misloopt
console.error("Error with message: " + error)
});
</script>
</head>
<body>
...
<h2 id="user">John Doe</h2>
<img id="image" src="" alt="">
...
</body>
</html>Last updated