# Objects, arrays and tables

Group fields with Object, define lists with Array, and render each element with each.

Use an **Object** to group related fields, and an **Array** for a list. This structure lets HTML read individual values and create content for each element supplied to the template.

This guide starts with recipient details, adds a list of items, and renders that list as table rows.

## 1. Group fields with Object

In **Parameters → Schema**, add `recipient`, choose **Object**, and add two Text fields: `name` and `email`.

The data looks like this:

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

Read nested fields with dot notation: `{{ params.recipient.name }}` and `{{ params.recipient.email }}`.

<figure class="doc-sim data-assets-illustration" aria-label="recipient · Object → name / 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>⌄ recipient</strong><span class="ds-type">Object</span></div><div class="ds-nested"><div class="ds-rows"><div><span>name</span><small>Text</small></div><div><span>email</span><small>Text</small></div></div><span class="sim-control sim-focus">＋ Add field</span></div></div></div>
<figcaption>recipient · Object → name / email</figcaption>
</figure>

## 2. Declare a list with Array

Add `items`, choose **Array**, and set its element structure to **Object**. Add a Text `name` and Number `quantity` to that structure.

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

Declare the item’s fields once; they apply to each element in the list. Supply an actual array rather than putting the whole JSON list in a Text field.

<figure class="doc-sim data-assets-illustration" aria-label="Array → item structure → nested fields">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Parameters</strong></div><div class="ds-node"><strong>⌄ items</strong><span class="ds-type">Array</span></div><div class="ds-nested"><div class="ds-node sim-focus"><strong>Item schema</strong><span class="ds-type">Object</span></div><div class="ds-rows"><div><span>name</span><small>Text</small></div><div><span>quantity</span><small>Number</small></div></div></div></div></div>
<figcaption>Array → item structure → nested fields</figcaption>
</figure>

## 3. Generate table rows with each

Use an `each` loop in 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>
```

Inside `each`, `name` and `quantity` belong to the **current item**. The `else` branch renders when the array is empty.

For a long table, put the header in `<thead>` and allow the section to split across sheets. See [Long tables and pagination](/docs/editor/pagination/).

<figure class="doc-sim data-assets-illustration" aria-label="each renders each item · else handles an empty list">
<div class="sim-stage"><div class="ds-data-table"><div><b>Item</b><b>Quantity</b></div><div><span>Item A</span><span>2</span></div><div><span>Item 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 renders each item · else handles an empty list</figcaption>
</figure>

## 4. Lists without nested fields

For simple values, set an array’s element type to **Text**, Number, or Boolean instead of Object. For example, `tags` is an array of Text:

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

Use `this` to read the element itself inside the loop:

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

Object and Array data both appear in **Payload**, ready to copy into **Run**.

<figure class="doc-sim data-assets-illustration" aria-label="Array of Text → use this to read each element">
<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>Review</span><span>Approved</span></div></div>
<figcaption>Array of Text → use this to read each element</figcaption>
</figure>

See the [Handlebars syntax reference](/docs/data/handlebars/) for conditions, scope, escaping, and advanced examples.
