# Objetos, matrices y tablas

Agrupe campos con Objeto, defina listas con Matriz y represente cada elemento con cada uno.

Utilice un **Objeto** para agrupar campos relacionados y una **Matriz** para una lista. Esta estructura permite a HTML leer valores individuales y crear contenido para cada elemento proporcionado a la plantilla.

Esta guía comienza con los detalles del destinatario, agrega una lista de elementos y representa esa lista como filas de una tabla.

## 1. Agrupar campos con Objeto

En **Parameters → Schema**, agregue `recipient`, elija **Objeto** y agregue dos campos de texto: `name` y `email`.

Los datos se ven así:

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

Leer campos anidados con notación de puntos: `{{ params.recipient.name }}` y `{{ params.recipient.email }}`.

<figure class="doc-sim data-assets-illustration" aria-label="destinatario · Objeto → nombre/correo electrónico">
<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>⌄ destinatario</strong><span class="ds-type">Objeto</span></div><div class="ds-nested"><div class="ds-rows"><div><span>nombre</span><small>Texto</small></div><div><span>correo electrónico</span><small>Texto</small></div></div><span class="sim-control sim-focus">＋ Agregar campo</span></div></div></div>
<figcaption>destinatario · Objeto → nombre/correo electrónico</figcaption>
</figure>

## 2. Declarar una lista con Array

Agregue `items`, elija **Matriz** y establezca su estructura de elementos en **Objeto**. Agregue un Texto `name` y un Número `quantity` a esa estructura.

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

Declarar los campos del elemento una vez; se aplican a cada elemento de la lista. Proporcione una matriz real en lugar de colocar toda la lista JSON en un campo de texto.

<figure class="doc-sim data-assets-illustration" aria-label="Matriz → estructura de elementos → campos anidados">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Parameters</strong></div><div class="ds-node"><strong>⌄ artículos</strong><span class="ds-type">Matriz</span></div><div class="ds-nested"><div class="ds-node sim-focus"><strong>Esquema de artículo</strong><span class="ds-type">Objeto</span></div><div class="ds-rows"><div><span>nombre</span><small>Texto</small></div><div><span>cantidad</span><small>Número</small></div></div></div></div></div>
<figcaption>Matriz → estructura de elementos → campos anidados</figcaption>
</figure>

## 3. Genere filas de tabla con cada

Utilice un bucle `each` en la sección 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>
```

Dentro de `each`, `name` y `quantity` pertenecen al **artículo actual**. La rama `else` se representa cuando la matriz está vacía.

Para una tabla larga, coloque el encabezado en `<thead>` y permita que la sección se divida en hojas. Ver [Tablas largas y paginación](/docs/es/editor/pagination/).

<figure class="doc-sim data-assets-illustration" aria-label="each representa cada elemento · else maneja una lista vacía">
<div class="sim-stage"><div class="ds-data-table"><div><b>Artículo</b><b>Cantidad</b></div><div><span>Artículo A</span><span>2</span></div><div><span>Artículo 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>each representa cada elemento · else maneja una lista vacía</figcaption>
</figure>

## 4. Listas sin campos anidados

Para valores simples, establezca el tipo de elemento de una matriz en **Texto**, Número o Booleano en lugar de Objeto. Por ejemplo, `tags` es una matriz de Texto:

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

Utilice `this` para leer el elemento dentro del bucle:

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

Los datos del objeto y de la matriz aparecen en **Payload**, listos para copiar en **Run**.

<figure class="doc-sim data-assets-illustration" aria-label="Matriz de texto → use esto para leer cada elemento">
<div class="sim-stage"><div class="ds-code sim-focus"><code>{ "tags": ["Design", "Review", "Approved"] }</code></div><div class="ds-tags"><span>Diseño</span><span>Revisión</span><span>Aprobado</span></div></div>
<figcaption>Matriz de texto → use esto para leer cada elemento</figcaption>
</figure>

Consulte la [referencia de sintaxis Handlebars](/docs/es/data/handlebars/) para conocer condiciones, alcance, escape y ejemplos avanzados.
