# Object, array và bảng dữ liệu

Nhóm trường bằng Object, tạo danh sách với Array và đưa từng phần tử vào nội dung bằng each.

Khi dữ liệu có nhiều thông tin liên quan, bạn có thể gom chúng thành **Object**; khi có một danh sách, dùng **Array**. Cấu trúc này giúp HTML đọc đúng từng trường và tạo nội dung theo số phần tử được truyền vào.

Bài này đi từ một nhóm thông tin người nhận đến một danh sách các mục, rồi dùng vòng lặp để đưa danh sách đó vào bảng.

## 1. Gom các trường bằng Object

Trong **Parameters → Schema**, thêm trường `recipient`, chọn kiểu **Object** rồi thêm hai trường con `name` và `email`, cùng kiểu Text.

Dữ liệu của nhóm này có dạng:

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

Dùng dấu chấm để đọc trường con: `{{ params.recipient.name }}` và `{{ 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. Khai báo danh sách bằng Array

Thêm `items`, chọn **Array** rồi đặt cấu trúc phần tử là **Object**. Thêm `name` kiểu Text và `quantity` kiểu Number vào cấu trúc đó.

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

Các trường được khai báo một lần cho cấu trúc item, sau đó dùng cho mỗi phần tử trong danh sách. Nhập danh sách dưới dạng array thực, không đặt cả đoạn JSON vào một trường Text.

<figure class="doc-sim data-assets-illustration" aria-label="Array → cấu trúc của mỗi item → các trường bên trong">
<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 → cấu trúc của mỗi item → các trường bên trong</figcaption>
</figure>

## 3. Tạo dòng bảng bằng each

Trong HTML của section, dùng vòng lặp `each`:

```handlebars
<table>
  <thead><tr><th>Mục</th><th>Số lượng</th></tr></thead>
  <tbody>
    {{#each params.items}}
      <tr><td>{{ name }}</td><td>{{ quantity }}</td></tr>
    {{else}}
      <tr><td colspan="2">Chưa có dữ liệu</td></tr>
    {{/each}}
  </tbody>
</table>
```

Bên trong `each`, `name` và `quantity` là trường của **item hiện tại**. Nhánh `else` hiển thị khi array rỗng.

Khi bảng có nhiều dòng, dùng `<thead>` cho tiêu đề và cho phép section tách qua nhiều tờ. Xem [Bảng dài và phân trang](/docs/vi/editor/pagination/).

<figure class="doc-sim data-assets-illustration" aria-label="each lặp từng item · else hiển thị khi danh sách rỗng">
<div class="sim-stage"><div class="ds-data-table"><div><b>Mục</b><b>Số lượng</b></div><div><span>Mục A</span><span>2</span></div><div><span>Mục 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>  Chưa có dữ liệu</code><code>{{/each}}</code></div></div>
<figcaption>each lặp từng item · else hiển thị khi danh sách rỗng</figcaption>
</figure>

## 4. Danh sách không cần trường con

Nếu chỉ có các giá trị đơn giản, đặt kiểu phần tử của array là **Text**, Number hoặc Boolean thay vì Object. Ví dụ, `tags` là danh sách Text:

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

Trong vòng lặp, dùng `this` để lấy chính giá trị phần tử:

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

Dữ liệu của Object và Array đều xuất hiện trong **Payload** để bạn sao chép sang **Run**.

<figure class="doc-sim data-assets-illustration" aria-label="Array của Text → dùng this để lấy giá trị từng phần tử">
<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 của Text → dùng this để lấy giá trị từng phần tử</figcaption>
</figure>

Xem [Cú pháp Handlebars](/docs/vi/data/handlebars/) để dùng điều kiện, scope, escape và các ví dụ nâng cao.