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í:
{
"recipient": {
"name": "Tembuilder",
"email": "[email protected]"
}
}Leer campos anidados con notación de puntos: {{ params.recipient.name }} y {{ params.recipient.email }}.
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.
{
"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.
3. Genere filas de tabla con cada
Utilice un bucle each en la sección HTML:
<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.
{{#each params.items}} {{ name }} · {{ quantity }}{{else}} No items yet{{/each}}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:
{ "tags": ["Design", "Review", "Approved"] }Utilice this para leer el elemento dentro del bucle:
{{#each params.tags}}
<span>{{ this }}</span>
{{/each}}Los datos del objeto y de la matriz aparecen en Payload, listos para copiar en Run.
{ "tags": ["Design", "Review", "Approved"] }Consulte la referencia de sintaxis Handlebars para conocer condiciones, alcance, escape y ejemplos avanzados.