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

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:

{
  "recipient": {
    "name": "Tembuilder",
    "email": "[email protected]"
  }
}

Dùng dấu chấm để đọc trường con: {{ params.recipient.name }} và {{ params.recipient.email }}.

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 đó.

{
  "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.

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

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

<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.

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:

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

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

{{#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.

Xem Cú pháp Handlebars để dùng điều kiện, scope, escape và các ví dụ nâng cao.