javascript / beginner
Snippet
Iterieren von Objekteinträgen mit Arrays in Svelte-Each-Blöcken
In Svelte durchläuft der `{#each}`-Block standardmäßig iterierbare Array-Strukturen. Wenn man mit JavaScript-Objekten arbeitet, wandelt `Object.entries()` Schlüssel-Wert-Paare in ein Array von `[key, value]`-Tupeln um, was ein sauberes Array-Destrukturieren direkt in der Template-Schleife ermöglicht.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
<script>let userProfile = { name: "Alex", role: "Developer", level: "Beginner" };</script><dl>{#each Object.entries(userProfile) as [key, value]}<dt>{key}:</dt><dd>{value}</dd>{/each}</dl>
svelte
Erklärung
1
let userProfile = { name: "Alex", role: "Developer", level: "Beginner" };
Deklariert ein JavaScript-Objekt mit Schlüssel-Wert-Paaren, die ein Benutzerprofil darstellen.
2
{#each Object.entries(userProfile) as [key, value]}
Wandelt das Objekt in ein Array von Schlüssel-Wert-Paaren um und entpackt jedes Paar mittels Array-Destrukturierung.
3
<dt>{key}:</dt>
Rendert den extrahierten Schlüsselnamen in einem HTML-Definitionsbegriff-Tag.
4
<dd>{value}</dd>
Rendert den zum Schlüssel gehörenden extrahierten Wert in einem HTML-Definitionsbeschreibungs-Tag.
5
{/each}
Schließt den Svelte-Iterationsblock, sobald alle Einträge des Arrays verarbeitet wurden.