# Objets, tableaux et tables

Regroupez les champs avec Object, définissez des listes avec Array et restituez chaque élément avec chacun.

Utilisez un **Objet** pour regrouper les champs associés et un **Array** pour une liste. Cette structure permet à HTML de lire des valeurs individuelles et de créer du contenu pour chaque élément fourni au modèle.

Ce guide commence par les détails du destinataire, ajoute une liste d'éléments et affiche cette liste sous forme de lignes de tableau.

## 1. Regrouper les champs avec Objet

Dans **Parameters → Schema**, ajoutez `recipient`, choisissez **Objet** et ajoutez deux champs de texte : `name` et `email`.

Les données ressemblent à ceci :

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

Lire les champs imbriqués avec la notation par points : `{{ params.recipient.name }}` et `{{ params.recipient.email }}`.

<figure class="doc-sim data-assets-illustration" aria-label="destinataire · Objet → nom / email">
<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>⌄ destinataire</strong><span class="ds-type">Objet</span></div><div class="ds-nested"><div class="ds-rows"><div><span>nom</span><small>Texte</small></div><div><span>email</span><small>Texte</small></div></div><span class="sim-control sim-focus">＋ Ajouter un champ</span></div></div></div>
<figcaption>destinataire · Objet → nom / email</figcaption>
</figure>

## 2. Déclarez une liste avec Array

Ajoutez `items`, choisissez **Array** et définissez sa structure d'éléments sur **Object**. Ajoutez un texte `name` et un numéro `quantity` à cette structure.

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

Déclarez une fois les champs de l'élément ; ils s'appliquent à chaque élément de la liste. Fournissez un tableau réel plutôt que de placer la liste entière JSON dans un champ Texte.

<figure class="doc-sim data-assets-illustration" aria-label="Tableau → structure des éléments → champs imbriqués">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Parameters</strong></div><div class="ds-node"><strong>⌄ articles</strong><span class="ds-type">Tableau</span></div><div class="ds-nested"><div class="ds-node sim-focus"><strong>Schéma de l'article</strong><span class="ds-type">Objet</span></div><div class="ds-rows"><div><span>nom</span><small>Texte</small></div><div><span></span><small>Numéro</small></div></div></div></div></div>
<figcaption>Tableau → structure des éléments → champs imbriqués</figcaption>
</figure>

## 3. Générez des lignes de tableau avec chaque

Utilisez une boucle `each` dans la section 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>
```

À l'intérieur de `each`, `name` et `quantity` appartiennent à l'**élément actuel**. La branche `else` s'affiche lorsque le tableau est vide.

Pour un tableau long, mettez l'en-tête dans `<thead>` et permettez à la section de se diviser sur plusieurs feuilles. Voir [Tableaux longs et pagination](/docs/fr/editor/pagination/).

<figure class="doc-sim data-assets-illustration" aria-label="chacun restitue chaque élément · sinon gère une liste vide">
<div class="sim-stage"><div class="ds-data-table"><div><b>Article</b><b>Quantité</b></div><div><span>Article A</span><span>2</span></div><div><span>Article 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>chacun restitue chaque élément · sinon gère une liste vide</figcaption>
</figure>

## 4. Listes sans champs imbriqués

Pour les valeurs simples, définissez le type d'élément d'un tableau sur **Texte**, Nombre ou Booléen au lieu d'Objet. Par exemple, `tags` est un tableau de Text :

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

Utilisez `this` pour lire l'élément lui-même à l'intérieur de la boucle :

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

Les données d'objet et de tableau apparaissent toutes deux dans **Payload**, prêtes à être copiées dans **Run**.

<figure class="doc-sim data-assets-illustration" aria-label="Tableau de texte → utilisez-le pour lire chaque élément">
<div class="sim-stage"><div class="ds-code sim-focus"><code>{ "tags": ["Design", "Review", "Approved"] }</code></div><div class="ds-tags"><span>Conception</span><span>Révision</span><span>Approuvé</span></div></div>
<figcaption>Tableau de texte → utilisez-le pour lire chaque élément</figcaption>
</figure>

Consultez la [référence de syntaxe Handlebars](/docs/fr/data/handlebars/) pour les conditions, la portée, les échappements et les exemples avancés.
