Oppgave 2 — Vise lister med {#each}

Bakgrunn

Istedenfor å skrive ut hvert element manuelt lar {#each} deg loope over en liste og rendre samme HTML for hvert element.

<script>
  let frukter = ['Eple', 'Banan', 'Mango'];
</script>

{#each frukter as frukt}
  <p>{frukt}</p>
{/each}

Hent ut indeksen (posisjon i listen) med et komma:

{#each frukter as frukt, i}
  <p>{i + 1}. {frukt}</p>
{/each}

Loop over objekter med flere felt ved å destructure direkte:

{#each filmer as { tittel, år }}
  <p>{tittel} ({år})</p>
{/each}

Komplett eksempel

Hele +page.svelte som rendrer kortene under:

<script>
  let filmer = [
    { tittel: 'Interstellar', år: 2014 },
    { tittel: 'The Dark Knight', år: 2008 },
    { tittel: 'Inception', år: 2010 },
    { tittel: 'Oppenheimer', år: 2023 },
    { tittel: 'Parasite', år: 2019 },
  ];
</script>

<div class="film-list">
  {#each filmer as { tittel, år }, i}
    <div class="film-card">
      <span class="film-nr">{i + 1}</span>
      <div>
        <p class="film-tittel">{tittel}</p>
        <p class="film-år">{år}</p>
      </div>
    </div>
  {/each}
</div>

<style>
  .film-list { display: flex; flex-direction: column; gap: 0.5rem; }

  .film-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem 1rem;
  }

  .film-nr {
    width: 1.75rem;
    height: 1.75rem;
    background: #f3f4f6;
    color: #d97706;
    font-weight: 700;
    font-size: 0.8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .film-tittel { color: #111827; font-size: 0.95rem; font-weight: 500; margin: 0; }
  .film-år { color: #6b7280; font-size: 0.8rem; margin: 0; }
</style>

Resultatet:

Oppgaven

1. Lag en liste med objekter i <script> — valgfritt tema (byer, artister, matretter...).
2. Hvert objekt skal ha minst to felt, f.eks. navn og land.
3. Vis alle elementene på siden med {#each} og vis begge feltene.
4. Vis nummeret til hvert element ved bruk av indeksen.
5. Bonus: Legg til et {#if} inni loopen — f.eks. vis en stjerne ⭐ bak favorittene dine.

Tips

• Husk å lukke blokken med {/each}.
• Du kan ha hvilken som helst HTML inni en {#each}-blokk, inkludert kort, tabeller, bilder.
• For tomme lister: bruk {:else} rett før {/each} — da vises en fallback-tekst.