# Objekte, Arrays und Tabellen

Gruppieren Sie Felder mit Object, definieren Sie Listen mit Array und rendern Sie jedes Element mit jedem.

Verwenden Sie ein **Objekt**, um verwandte Felder zu gruppieren, und ein **Array** für eine Liste. Mit dieser Struktur kann HTML einzelne Werte lesen und Inhalte für jedes der Vorlage bereitgestellte Element erstellen.

Dieses Handbuch beginnt mit Empfängerdetails, fügt eine Liste von Elementen hinzu und stellt diese Liste als Tabellenzeilen dar.

## 1. Felder mit Objekt gruppieren

Fügen Sie unter **Parameters → Schema** `recipient` hinzu, wählen Sie **Objekt** und fügen Sie zwei Textfelder hinzu: `name` und `email`.

Die Daten sehen so aus:

```json
{
  "recipient": {
    "name": "Tembuilder",
    "email": "hello@tembuilder.com"
  }
}
```

Verschachtelte Felder mit Punktnotation lesen: `{{ params.recipient.name }}` und `{{ params.recipient.email }}`.

<figure class="doc-sim data-assets-illustration" aria-label="Empfänger · Objekt → Name / E-Mail">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Parameters</strong></div><div class="sim-tabs"><span class="sim-active">Schema</span><span>Payload</span></div><div class="ds-node"><strong>⌄ Empfänger</strong><span class="ds-type">Objekt</span></div><div class="ds-nested"><div class="ds-rows"><div><span>Name</span><small>Text</small></div><div><span>E-Mail</span><small>Text</small></div></div><span class="sim-control sim-focus">＋ Feld hinzufügen</span></div></div></div>
<figcaption>Empfänger · Objekt → Name / E-Mail</figcaption>
</figure>

## 2. Deklarieren Sie eine Liste mit Array

Fügen Sie `items` hinzu, wählen Sie **Array** und setzen Sie seine Elementstruktur auf **Objekt**. Fügen Sie dieser Struktur einen Text `name` und eine Nummer `quantity` hinzu.

```json
{
  "items": [
    { "name": "Item A", "quantity": 2 },
    { "name": "Item B", "quantity": 1 }
  ]
}
```

Deklarieren Sie die Felder des Elements einmal; Sie gelten für jedes Element in der Liste. Geben Sie ein tatsächliches Array an, anstatt die gesamte JSON-Liste in ein Textfeld einzufügen.

<figure class="doc-sim data-assets-illustration" aria-label="Array → Elementstruktur → verschachtelte Felder">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Parameters</strong></div><div class="ds-node"><strong>⌄ Artikel</strong><span class="ds-type">Array</span></div><div class="ds-nested"><div class="ds-node sim-focus"><strong>Artikelschema</strong><span class="ds-type">Objekt</span></div><div class="ds-rows"><div><span>Name</span><small>Text</small></div><div><span>Menge</span><small>Nummer</small></div></div></div></div></div>
<figcaption>Array → Elementstruktur → verschachtelte Felder</figcaption>
</figure>

## 3. Generieren Sie jeweils Tabellenzeilen

Verwenden Sie eine `each`-Schleife im Abschnitt HTML:

```handlebars
<table>
  <thead><tr><th>Item</th><th>Quantity</th></tr></thead>
  <tbody>
    {{#each params.items}}
      <tr><td>{{ name }}</td><td>{{ quantity }}</td></tr>
    {{else}}
      <tr><td colspan="2">No items yet</td></tr>
    {{/each}}
  </tbody>
</table>
```

Innen gehören `each`, `name` und `quantity` zum **aktuellen Artikel**. Der `else`-Zweig wird gerendert, wenn das Array leer ist.

Für eine lange Tabelle fügen Sie die Kopfzeile in „`“ ein<thead>` und lassen Sie den Abschnitt auf mehrere Blätter aufteilen. Siehe [Lange Tabellen und Paginierung](/docs/de/editor/pagination/).

<figure class="doc-sim data-assets-illustration" aria-label="every rendert jedes Element · else behandelt eine leere Liste">
<div class="sim-stage"><div class="ds-data-table"><div><b>Artikel</b><b>Menge</b></div><div><span>Punkt A</span><span>2</span></div><div><span>Punkt B</span><span>1</span></div></div><div class="ds-code sim-focus"><code>{{#each params.items}}</code><code>  {{ name }} · {{ quantity }}</code><code>{{else}}</code><code>  No items yet</code><code>{{/each}}</code></div></div>
<figcaption>every rendert jedes Element · else behandelt eine leere Liste</figcaption>
</figure>

## 4. Listen ohne verschachtelte Felder

Legen Sie für einfache Werte den Elementtyp eines Arrays auf **Text**, Zahl oder Boolean statt Objekt fest. `tags` ist beispielsweise ein Array von Text:

```json
{ "tags": ["Design", "Review", "Approved"] }
```

Verwenden Sie `this`, um das Element selbst innerhalb der Schleife zu lesen:

```handlebars
{{#each params.tags}}
  <span>{{ this }}</span>
{{/each}}
```

Objekt- und Array-Daten erscheinen beide in **Payload** und können nach **Run** kopiert werden.

<figure class="doc-sim data-assets-illustration" aria-label="Textarray → Verwenden Sie dies, um jedes Element zu lesen">
<div class="sim-stage"><div class="ds-code sim-focus"><code>{ "tags": ["Design", "Review", "Approved"] }</code></div><div class="ds-tags"><span>Design</span><span>Rezension</span><span>Genehmigt</span></div></div>
<figcaption>Textarray → Verwenden Sie dies, um jedes Element zu lesen</figcaption>
</figure>

Weitere Informationen zu Bedingungen, Umfang, Escapezeichen und erweiterten Beispielen finden Sie in der SyntaxreferenzHandlebars](/docs/de/data/handlebars/).