82 lines
2.8 KiB
JavaScript
82 lines
2.8 KiB
JavaScript
// ====================== API INTEGRATION ======================
|
|
// Fetch & Display Users from JSONPlaceholder API
|
|
|
|
const API_URL = 'https://jsonplaceholder.typicode.com/users';
|
|
const apiContainer = document.getElementById('apiUsersContainer');
|
|
|
|
/**
|
|
* Fetches users from JSONPlaceholder API
|
|
* Parses response as JSON and renders to DOM
|
|
* Includes error handling with catch()
|
|
*/
|
|
function fetchAndDisplayUsers() {
|
|
if (!apiContainer) {
|
|
console.log('API container not found on this page');
|
|
return;
|
|
}
|
|
|
|
// Show loading state
|
|
apiContainer.innerHTML = '<p class="loading">Daten werden geladen...</p>';
|
|
|
|
fetch(API_URL)
|
|
.then(response => {
|
|
console.log('Response Status:', response.status);
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
console.log('Fetched Users Data:', data);
|
|
|
|
// Clear container
|
|
apiContainer.innerHTML = '';
|
|
|
|
// Create list of users using createElement
|
|
const userList = document.createElement('ul');
|
|
userList.className = 'api-users-list';
|
|
|
|
data.forEach(user => {
|
|
const listItem = document.createElement('li');
|
|
listItem.className = 'api-user-item';
|
|
|
|
// Create user card with detailed information
|
|
const userCard = document.createElement('div');
|
|
userCard.className = 'api-user-card';
|
|
|
|
userCard.innerHTML = `
|
|
<div class="api-user-header">
|
|
<h3 class="api-user-name">${user.name}</h3>
|
|
<span class="api-user-id">ID: ${user.id}</span>
|
|
</div>
|
|
<div class="api-user-details">
|
|
<p><strong>Username:</strong> ${user.username}</p>
|
|
<p><strong>Email:</strong> <a href="mailto:${user.email}">${user.email}</a></p>
|
|
<p><strong>Telefon:</strong> ${user.phone}</p>
|
|
<p><strong>Website:</strong> <a href="https://${user.website}" target="_blank">${user.website}</a></p>
|
|
<p><strong>Firma:</strong> ${user.company.name}</p>
|
|
</div>
|
|
`;
|
|
|
|
listItem.appendChild(userCard);
|
|
userList.appendChild(listItem);
|
|
});
|
|
|
|
apiContainer.appendChild(userList);
|
|
console.log(`Successfully loaded and displayed ${data.length} users`);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching users:', error);
|
|
apiContainer.innerHTML = `
|
|
<div class="error-message">
|
|
<h3>⚠️ Fehler beim Laden der Daten</h3>
|
|
<p>${error.message}</p>
|
|
<p>Bitte versuchen Sie es später erneut oder kontaktieren Sie den Administrator.</p>
|
|
<button onclick="fetchAndDisplayUsers()" class="retry-btn">Erneut versuchen</button>
|
|
</div>
|
|
`;
|
|
});
|
|
}
|
|
|
|
// Execute on page load
|
|
document.addEventListener('DOMContentLoaded', fetchAndDisplayUsers);
|