JavaScript Integratie met Externe API's en Data Verwerking
description
Met deze prompt leer je hoe je externe API's efficiënt in JavaScript kunt integreren om dynamische en interactieve webapplicaties te maken. Het helpt je om praktische voorbeelden te krijgen voor data ophalen en verwerken, wat essentieel is voor moderne websites. Hierdoor voorkom je beginnersfouten en leer je best practices voor API-aanroepen.
prompt
Help mij met het schrijven van JavaScript-code om een externe API aan te roepen, de ontvangen data te verwerken en dynamisch weer te geven. Geef ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier is een voorbeeld van JavaScript-code die een externe API aanroept, de gegevens verwerkt en dynamisch weergeeft op je webpagina. We gebruiken de OpenWeatherMap API om de temperatuur, luchtvochtigheid en weersomstandigheden van Amsterdam op te halen.
Voorbeeldcode:
```html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<title>Weergegevens Amsterdam</title>
</head>
<body>
<h1>Weer in Amsterdam</h1>
<div id="weer-info">
<p>Temperatuur: <span id="temp"></span> °C</p>
<p>Luchtvochtigheid: <span id="humidity"></span> %</p>
<p>Weersomstandigheden: <span id="description"></span></p>
</div>
<script>
// Vervang YOUR_API_KEY door je echte API-sleutel
const apiKey = 'YOUR_API_KEY';
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=Amsterdam&appid=${apiKey}&units=metric`;
// Functie om data op te halen
fetch(apiUrl)
.then(response => {
if (!response.ok) {
throw new Error('Netwerkantwoord was niet ok');
}
return response.json();
})
.then(data => {
// Data verwerken
const temperatuur = data.main.temp; // in °C
const luchtvochtigheid = data.main.humidity; // in %
const weersomstandigheden = data.weather[0].description; // beschrijving
// Data weergeven in de HTML
document.getElementById('temp').textContent = temperatuur;
document.getElementById('humidity').textContent = luchtvochtigheid;
document.getElementById('description').textContent = weersomstandigheden;
})
.catch(error => {
console.error('Er is een fout opgetreden:', error);
});
</script>
</body>
</html>
```
Wat doet deze code?
- Het haalt de weergegevens voor Amsterdam op via de API.
- Het gebruikt de `units=metric` parameter om de temperatuur in °C te krijgen.
- Het verwerkt de ontvangen JSON data om:
- De temperatuur (`main.temp`)
- De luchtvochtigheid (`main.humidity`)
- De weersomstandigheden (`weather[0].description`)
- Vervolgens worden deze gegevens dynamisch weergegeven in de HTML-elementen.
Let op: vervang `YOUR_API_KEY` door je eigen API-sleutel van OpenWeatherMap.
Wil je nog verdere aanpassingen of uitleg?
provider: deepseek
model: deepseek-chat
Zeker, ik help je met het schrijven van JavaScript-code om weergegevens op te halen en weer te geven. Hier is een complete oplossing:
```javascript
// Vervang 'YOUR_API_KEY' door je daadwerkelijke API-sleutel van OpenWeatherMap
const API_KEY = 'YOUR_API_KEY';
const CITY = 'Amsterdam';
const API_URL = `https://api.openweathermap.org/data/2.5/weather?q=${CITY}&appid=${API_KEY}&units=metric&lang=nl`;
// Functie om weergegevens op te halen
async function fetchWeatherData() {
try {
const response = await fetch(API_URL);
if (!response.ok) {
throw new Error(`HTTP-fout! Status: ${response.status}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error('Fout bij ophalen weergegevens:', error);
throw error;
}
}
// Functie om data te verwerken en weer te geven
function displayWeatherData(weatherData) {
// Extraheer de benodigde informatie
const temperature = Math.round(weatherData.main.temp);
const humidity = weatherData.main.humidity;
const description = weatherData.weather[0].description;
const cityName = weatherData.name;
// Maak HTML-elementen aan
const weatherContainer = document.createElement('div');
weatherContainer.className = 'weather-container';
weatherContainer.innerHTML = `
<h2>Weer in ${cityName}</h2>
<div class="weather-info">
<p><strong>Temperatuur:</strong> ${temperature}°C</p>
<p><strong>Luchtvochtigheid:</strong> ${humidity}%</p>
<p><strong>Omstandigheden:</strong> ${description}</p>
</div>
`;
// Voeg toe aan de pagina
document.body.appendChild(weatherContainer);
}
// Hoofdfunctie om alles aan te roepen
async function getWeather() {
try {
const weatherData = await fetchWeatherData();
displayWeatherData(weatherData);
} catch (error) {
// Toon foutmelding aan gebruiker
const errorElement = document.createElement('div');
errorElement.className = 'error';
errorElement.textContent = 'Kon weergegevens niet ophalen. Probeer het later opnieuw.';
document.body.appendChild(errorElement);
}
}
// Roep de functie aan wanneer de pagina geladen is
document.addEventListener('DOMContentLoaded', getWeather);
```
**CSS voor opmaak (optioneel):**
```css
.weather-container {
background-color: #f0f8ff;
padding: 20px;
border-radius: 10px;
margin: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.weather-info p {
margin: 10px 0;
font-size: 16px;
}
.error {
color: red;
padding: 20px;
background-color: #ffe6e6;
border-radius: 5px;
margin: 20px;
}
```
**Belangrijke opmerkingen:**
1. **API-sleutel**: Je moet je eigen API-sleutel registreren op [OpenWeatherMap](https://openweathermap.org/api)
2. **Data die wordt opgehaald**:
- `weatherData.main.temp` - Temperatuur in Celsius (door `&units=metric`)
- `weatherData.main.humidity` - Luchtvochtigheid in percentage
- `weatherData.weather[0].description` - Weersomstandigheden in het Nederlands (door `&lang=nl`)
3. **Extra opties in de URL**:
- `&units=metric` - voor Celsius i.p.v. Kelvin
- `&lang=nl` - voor Nederlandse beschrijvingen
4. **Error handling**: De code bevat try-catch blokken voor netwerkfouten en verwerkingsfouten
**Alternatieve versie met then() in plaats van async/await:**
```javascript
function getWeatherThen() {
fetch(API_URL)
.then(response => {
if (!response.ok) throw new Error('Netwerkfout');
return response.json();
})
.then(data => displayWeatherData(data))
.catch(error => console.error('Fout:', error));
}
```
Vergeet niet om `YOUR_API_KEY` te vervangen door je eigen API-sleutel!