Verschillende webinars en contourings inladen uit de database voor op de homepage

[itsValyria]

Hoe zorg je ervoor dat er 4 verschillende kaartjes te zien zijn op de homepage.

• [x] Laad verschillende data kaartjes in
• [x] Laat max 4 webinars zien
• [x] Laat max 4 contourings zien
• [x] Laad in de categorie met woorden (nu zijn het cijfers)
• [x] Laad in de user met woorden (nu zijn het cijfers)
• [x] Laad in de spreker met woorden (nu zijn het cijfers)

[itsValyria]

HTML

Door {...webinar} en {...contouring} mee te geven aan het component. Worden alle variabelen in het component automatisch ingevuld. De variabelen in het component hebben dezelfde namen als die uit de database. Met de each loop zorg je ervoor dat er meerdere kaartjes te zien zijn.

https://github.com/Ryank2004/Oncollaboration-Sprint-14/blob/b8c26ad8f4433e98c711f62b2571047391e0f515/src/routes/%2Bpage.svelte#L15-L19

https://github.com/Ryank2004/Oncollaboration-Sprint-14/blob/b8c26ad8f4433e98c711f62b2571047391e0f515/src/routes/%2Bpage.svelte#L27-L31

JavaScript

In de +layout.server.js haal je de data op met een load functie. Door ?fields=*.*.* in de url te zetten haal je alle data die in de koppeltabellen staan op. Hierdoor kun je dus gewoon de namen van categorieën op halen zonder dat je extra javascript hoeft te schrijven. Deze data geef je door aan +page.svelte met export let data.

Om ervoor te zorgen dat je maar 4 resultaten te zien krijgt maak ik een nieuwe array aan. Met .splice(0,4) zorg ik ervoor dat je de 4 bovenste objecten mee geeft. Deze nieuwe array wordt dan gebruikt voor de each loop.

https://github.com/Ryank2004/Oncollaboration-Sprint-14/blob/b8c26ad8f4433e98c711f62b2571047391e0f515/src/routes/%2Blayout.server.js#L1-L16

https://github.com/Ryank2004/Oncollaboration-Sprint-14/blob/b8c26ad8f4433e98c711f62b2571047391e0f515/src/routes/%2Bpage.svelte#L1-L7