82 lines
3.7 KiB
JavaScript
82 lines
3.7 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const container = document.getElementById('berater-container');
|
|
|
|
fetch('json/berater.json')
|
|
.then(response => {
|
|
if (!response.ok) throw new Error('Fehler beim Laden der JSON');
|
|
return response.json();
|
|
})
|
|
.then(beraterDaten => {
|
|
beraterDaten.forEach(berater => {
|
|
const card = document.createElement('div');
|
|
card.className = 'berater-card';
|
|
|
|
// 1. Bekannte Listen und Zusätze verarbeiten
|
|
let zertifikateHtml = '';
|
|
if (berater.zertifikate && berater.zertifikate.length > 0) {
|
|
zertifikateHtml = `<h4 class="bio-title" style="margin-top: 16px;">Zertifikate</h4><ul class="berater-liste">`;
|
|
berater.zertifikate.forEach(zert => {
|
|
zertifikateHtml += `<li>${zert}</li>`;
|
|
});
|
|
zertifikateHtml += `</ul>`;
|
|
}
|
|
|
|
let linksHtml = '';
|
|
if (berater.links && berater.links.length > 0) {
|
|
linksHtml = `<div class="berater-links">`;
|
|
berater.links.forEach(link => {
|
|
linksHtml += `<a href="${link.url}" target="_blank" class="berater-link-btn">${link.text}</a>`;
|
|
});
|
|
linksHtml += `</div>`;
|
|
}
|
|
|
|
let zusatzHtml = '';
|
|
if (berater.zusatzInfo) {
|
|
zusatzHtml = `<p class="berater-zusatz">${berater.zusatzInfo}</p>`;
|
|
}
|
|
|
|
// 2. NEU: Alle eigenen/unbekannten Felder automatisch generieren
|
|
// Wir definieren zuerst, welche Felder Standard sind und ignoriert werden sollen
|
|
const standardFelder = ['id', 'name', 'role', 'image', 'bioTitle', 'bioText', 'zertifikate', 'links', 'zusatzInfo'];
|
|
let eigeneFelderHtml = '';
|
|
|
|
// Wir durchlaufen jeden Eintrag in der JSON für diesen Berater
|
|
for (const [schluessel, wert] of Object.entries(berater)) {
|
|
// Wenn das Feld kein Standardfeld ist, bauen wir daraus Überschrift + Text
|
|
if (!standardFelder.includes(schluessel)) {
|
|
eigeneFelderHtml += `
|
|
<h4 class="bio-title" style="margin-top: 16px; text-transform: capitalize;">${schluessel}</h4>
|
|
<p class="bio-text">${wert}</p>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// 3. Die Karte zusammenbauen
|
|
card.innerHTML = `
|
|
<div class="berater-image-wrapper">
|
|
<img src="${berater.image}" alt="${berater.name} Profilbild">
|
|
</div>
|
|
<h2 class="berater-name">${berater.name}</h2>
|
|
<h3 class="berater-rolle">${berater.role}</h3>
|
|
|
|
<div class="berater-bio-box">
|
|
<h4 class="bio-title">${berater.bioTitle}</h4>
|
|
<p class="bio-text">${berater.bioText}</p>
|
|
|
|
<!-- Hier werden deine eigenen JSON-Einträge wie "bla bla bla" platziert -->
|
|
${eigeneFelderHtml}
|
|
|
|
${zusatzHtml}
|
|
${zertifikateHtml}
|
|
${linksHtml}
|
|
</div>
|
|
`;
|
|
|
|
container.appendChild(card);
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('Fehler:', error);
|
|
container.innerHTML = '<p style="color: #94A3B8;">Daten konnten nicht geladen werden.</p>';
|
|
});
|
|
}); |