JSON sang HTML

Đề xuất Liên quan

Về JSON sang HTML và bảng HTML

Trường hợp sử dụng

• Phát triển frontend: nhanh chóng kết xuất dữ liệu JSON từ API thành bảng HTML để nhúng vào bảng điều khiển quản trị hoặc trang tài liệu
• Dự án Tailwind / Bootstrap: dán tên lớp Tailwind hoặc Bootstrap trực tiếp vào trường lớp bảng để tích hợp liền mạch với hệ thống kiểu hiện có
• Trang web đáp ứng: bao bọc cuộn ngang mặc định ngăn bảng di động phá vỡ bố cục trang
• Hiển thị trực quan hóa dữ liệu: dán các bảng có kiểu vào blog, tài liệu, Confluence, Notion hoặc bất kỳ nền tảng nào hỗ trợ nhúng HTML
• Tạo báo cáo: nhanh chóng chuyển đổi dữ liệu JSON xuất từ backend thành báo cáo email HTML cho các bên liên quan kinh doanh
• Tạo nguyên mẫu frontend: xem trước kiểu bảng với dữ liệu thực trong giai đoạn thiết kế để căn chỉnh với sản phẩm và thiết kế trước khi giao
• Hệ thống CMS: tạo đoạn mã bảng HTML tĩnh cho WordPress, Drupal và các nền tảng CMS khác, tránh sự phức tạp của công cụ mẫu
• Kiểm thử và gỡ lỗi: dán đầu ra JSON.stringify từ bảng điều khiển trình duyệt để nhanh chóng xem trước cấu trúc hai chiều của dữ liệu lồng nhau phức tạp
• Mẫu email: nhúng HTML bảng vào email HTML (kiểm tra khả năng tương thích với Outlook)
• Viết tài liệu API: nhúng bảng HTML trong Markdown, Swagger, Redoc thay thế cho các ví dụ JSON mặc định
• Tình huống giảng dạy: chuyển đổi các bài tập JSON lồng nhau trong khóa học cấu trúc dữ liệu thành bảng để chấm điểm hàng loạt
• Báo cáo làm sạch dữ liệu: chuyển đổi JSON lồng nhau từ xuất cơ sở dữ liệu thành bảng thông qua chế độ Làm phẳng để so sánh trường dễ dàng

Cách Sử dụng

1. Dán mảng JSON (khuyến nghị) hoặc một đối tượng đơn lẻ vào trình chỉnh sửa bên trái, hoặc nhấp "Sample" để tải 3 ví dụ sản phẩm, hoặc nhấp "Upload" để tải tệp .json / .txt
2. Chọn chế độ xử lý lồng nhau trên thanh công cụ (khuyến nghị: "Làm phẳng"). Các đối tượng lồng nhau tự động mở rộng thành các khóa phân cách bằng dấu chấm như `user.name`
3. Nhấp nút "Convert" (hoặc chỉ cần nhấn Enter) để kích hoạt chuyển đổi. Đầu vào được bảo vệ bằng debounce 500ms
4. Chuyển sang tab Code bên phải để xem mã bảng HTML có tô sáng cú pháp, hoặc tab Preview để xem kết xuất iframe theo thời gian thực
5. Bật các tùy chọn kiểu trên thanh công cụ (sọc ngựa vằn / đường viền / di chuột / thu gọn / đáp ứng), nhập lớp bảng tùy chỉnh, đặt trình giữ chỗ null — bản xem trước trực tiếp cập nhật ngay lập tức
6. Khi hài lòng, nhấp "Copy" để sao chép mã HTML hoặc "Download" để lưu dưới dạng table.html. Nhấp Reset nếu bạn cần bắt đầu lại

Tính năng

• Tự động làm phẳng đối tượng lồng nhau: mở rộng đệ quy `{user:{name,age}}` thành các khóa dấu chấm `user.name`, `user.age` (dấu phân cách có thể cấu hình), không cần script
• Ba chế độ xử lý lồng nhau: Làm phẳng (Khuyến nghị, tự động mở rộng đến 6 cấp) / Khóa cấp cao nhất (đối tượng lồng nhau làm một cột) / Chuỗi (đối tượng lồng nhau thành chuỗi JSON)
• Hook lớp CSS tùy chỉnh: chèn bất kỳ chuỗi lớp nào vào `<table>` và `<div>` bao bọc bên ngoài tùy chọn, tích hợp liền mạch với Tailwind / Bootstrap / Bulma
• Cuộn ngang đáp ứng: bao bọc bên ngoài `overflow-x:auto` theo mặc định, thanh cuộn ngang tự động xuất hiện trên màn hình hẹp
• 6 công tắc kiểu trực quan: sọc ngựa vằn, đường viền, đánh dấu di chuột, chế độ thu gọn, cột chỉ mục đầu tiên (#), chú thích bảng — áp dụng ngay từ hộp kiểm trên thanh công cụ
• Tab kép xem trước Code + iframe: tab Code hiển thị mã HTML có tô sáng cú pháp, tab Preview kết xuất bảng thực trong iframe hộp cát theo thời gian thực
• Tô sáng theo loại: null hiển thị màu xám in nghiêng (văn bản giữ chỗ có thể tùy chỉnh), boolean xanh/đỏ, số xanh dương, đối tượng lồng nhau xem toàn bộ JSON khi di chuột
• Bảo vệ giới hạn dòng: mặc định 1000 dòng (1-10000), tự động cắt bớt với thông báo "Đã cắt bớt" để tránh trình duyệt chậm
• Phản hồi thống kê tạo: bảng bên phải hiển thị "Đã tạo X dòng × Y cột" + huy hiệu cắt bớt theo thời gian thực
• Sao chép / tải xuống một cú nhấp: ở chế độ Code sao chép mã HTML vào bộ nhớ tạm hoặc tải xuống dưới dạng tệp table.html
• Dữ liệu mẫu + tải tệp lên: 3 mẫu sản phẩm tích hợp (Laptop / Mouse / Desk Chair) tải bằng một cú nhấp, hỗ trợ kéo thả hoặc nhấp để tải tệp .json / .txt
• Đặt lại bằng một cú nhấp: nút Reset trên thanh công cụ khôi phục ngay tất cả 14 cấu hình về mặc định
• Lịch sử cục bộ: dựa trên localStorage, lưu giữ 200 lần nhập gần nhất, có thể khôi phục sau khi làm mới hoặc vô tình đóng tab
• Xử lý hoàn toàn trong trình duyệt: tất cả phân tích JSON, tạo HTML, sao chép và tải xuống đều trong trình duyệt, không gửi dữ liệu đến bất kỳ máy chủ nào

Ví dụ mã

// 1) Gọi GitHub API để lấy danh sách người dùng
async function fetchUsers() {
  const res = await fetch('https://api.github.com/users?per_page=10');
  return await res.json();
}

// 2) Hàm làm phẳng lồng nhau (tương đương với logic làm phẳng của công cụ)
function flattenObject(obj, prefix = '', sep = '.', result = {}) {
  for (const [k, v] of Object.entries(obj || {})) {
    const key = prefix ? `${prefix}${sep}${k}` : k;
    if (v && typeof v === 'object' && !Array.isArray(v)) {
      flattenObject(v, key, sep, result);
    } else {
      result[key] = v;
    }
  }
  return result;
}

// 3) Chuyển đổi dữ liệu đã làm phẳng thành bảng HTML, chèn các lớp Tailwind
function generateHtmlTable(rows) {
  const flat = rows.map(r => flattenObject(r));
  const cols = [...new Set(flat.flatMap(r => Object.keys(r)))];
  const thead = cols.map(c => `<th class="px-4 py-2 text-left">${c}</th>`).join('');
  const tbody = flat.map(r =>
    `<tr class="border-b hover:bg-gray-50">${cols.map(c => `<td class="px-4 py-2">${r[c] ?? 'N/A'}</td>`).join('')}</tr>`
  ).join('');
  return `<table class="min-w-full text-sm">
  <thead class="bg-gray-100"><tr>${thead}</tr></thead>
  <tbody>${tbody}</tbody>
</table>`;
}

// 4) Chèn vào trang
const users = await fetchUsers();
const html = generateHtmlTable(users);
document.getElementById('table-container').innerHTML = html;
console.log('Đã tạo ' + users.length + ' dòng, ' + (Object.keys(flattenObject(users[0])).length) + ' cột');

from flask import Flask, jsonify, render_template_string
import json

app = Flask(__name__)

TEMPLATE = """
<!doctype html><html><body>
<div class="overflow-x-auto">{{ table_html | safe }}</div>
</body></html>
"""

def flatten(obj, prefix='', sep='.', result=None):
    """Làm phẳng đệ quy các đối tượng lồng nhau"""
    if result is None:
        result = {}
    for k, v in (obj or {}).items():
        key = f"{prefix}{sep}{k}" if prefix else k
        if isinstance(v, dict):
            flatten(v, key, sep, result)
        else:
            result[key] = v
    return result

def json_to_html_table(data, table_class='min-w-full border-collapse',
                        max_rows=1000, responsive=True):
    if isinstance(data, dict):
        data = [data]
    if not data:
        return "<p>Không có dữ liệu</p>"

    # Cắt bớt dòng
    truncated = False
    if len(data) > max_rows:
        data = data[:max_rows]
        truncated = True

    # Làm phẳng từng dòng
    flat_rows = [flatten(row) for row in data]

    # Thu thập tất cả tên cột (dùng set để khử trùng lặp, giữ thứ tự chèn)
    columns = []
    for row in flat_rows:
        for k in row.keys():
            if k not in columns:
                columns.append(k)

    # Tạo thead
    thead = "".join(f'<th class="px-4 py-2 text-left bg-gray-100">{c}</th>' for c in columns)

    # Tạo các dòng bảng
    rows = []
    for i, row in enumerate(flat_rows):
        bg = "bg-gray-50" if i % 2 == 1 else ""
        tds = "".join(
            f'<td class="px-4 py-2 {bg}">{("N/A" if row.get(c) is None else row.get(c, ""))}</td>'
            for c in columns
        )
        rows.append(f'<tr class="hover:bg-blue-50">{tds}</tr>')

    html = f'<table class="{table_class}"><thead><tr>{thead}</tr></thead><tbody>{"".join(rows)}</tbody></table>'
    if responsive:
        html = f'<div class="overflow-x-auto">{html}</div>'

    if truncated:
        html = f'<p class="text-amber-600 text-sm">Dữ liệu đã được cắt bớt xuống {max_rows} dòng đầu tiên</p>{html}'

    return html


@app.route('/api/users')
def users():
    data = json.load(open('users.json'))
    return jsonify(data)

@app.route('/users.html')
def users_html():
    import requests
    data = requests.get('http://localhost:5000/api/users').json()
    return render_template_string(TEMPLATE, table_html=json_to_html_table(data))


if __name__ == '__main__':
    app.run(debug=True)

# 1) Sử dụng jq để tổng hợp và làm phẳng nhật ký lồng nhau thành các khóa dấu chấm
cat app.log | jq -s '
  group_by(.response.status_code) |
  map({
    status: .[0].response.status_code,
    count: length,
    "first_request.method": .[0].request.method,
    "last_request.url": .[-1].request.url,
    "first_seen": min_by(.timestamp).timestamp,
    "last_seen": max_by(.timestamp).timestamp
  })
' > stats.json

# 2) Dán stats.json vào công cụ này
#    Chọn chế độ "Làm phẳng (Khuyến nghị)" trên thanh công cụ
#    Đánh dấu "Sọc ngựa vằn + Bao bọc đáp ứng + Đường viền"
#    Trong ô tên lớp bảng nhập: min-w-full text-sm border-collapse
#    Đặt trình giữ chỗ null: - (các trường bị thiếu hiển thị là -)
#    Đặt Chú thích: Thống kê nhật ký lỗi sản xuất 2026-07
#    Nhấp Convert rồi tải xuống table.html

# 3) Tải lên trang web tĩnh S3 / OSS
aws s3 cp table.html s3://my-bucket/reports/2026-07.html --acl public-read

# Hoặc nhúng vào tài liệu Confluence / Notion / VuePress
sed -i '' 's/min-w-full/min-w-full shadow-md/g' table.html

# Hoặc gửi dưới dạng email HTML
mutt -e "set content_type=text/html" -s "Nhật ký lỗi 2026-07" your@email.com < table.html

Câu hỏi Thường gặp

Xử lý sự cố

Thuật ngữ

Bảng HTML (HTML Table)

Phần tử hiển thị dữ liệu có cấu trúc chuẩn W3C, bao gồm các thẻ ngữ nghĩa table / thead / tbody / tr / th / td / caption. Mã được tạo bởi công cụ này tuân thủ chặt chẽ cấu trúc này.

Mảng JSON

Tập hợp các đối tượng được bao bọc trong dấu ngoặc vuông [...]. Công cụ sử dụng mỗi đối tượng trong mảng làm một hàng của bảng; mảng trống không tạo bảng (hiển thị thông báo).

Đối tượng JSON

Tập hợp các cặp khóa-giá trị được bao bọc trong dấu ngoặc nhọn {}. Công cụ sử dụng mỗi khóa của đối tượng làm tiêu đề bảng và giá trị làm ô; một đối tượng đơn lẻ được tự động bao bọc thành bảng một hàng.

Làm phẳng (Flatten)

Mở rộng đệ quy các đối tượng lồng nhau thành các khóa phẳng phân cách bằng dấu chấm, ví dụ: {user:{name:'A'}} → 'user.name'. Công cụ hỗ trợ tự động làm phẳng 6 cấp với dấu phân cách có thể cấu hình.

thead / tbody

Hai phân vùng ngữ nghĩa của bảng HTML: thead bao bọc hàng tiêu đề (th), tbody bao bọc các hàng dữ liệu (td). Mã được tạo bởi công cụ phân biệt chặt chẽ hai phần này.

Caption

Thẻ tiêu đề bảng, nằm ở hàng đầu tiên bên trong bảng. Công cụ hỗ trợ văn bản chú thích tùy chỉnh; khi được bật, tiêu đề đã chỉ định sẽ hiển thị phía trên bảng, hữu ích cho SEO và khả năng truy cập.

Sọc ngựa vằn (Zebra Striping)

Mẫu trực quan trong đó các hàng lẻ và hàng chẵn luân phiên sử dụng các màu nền khác nhau, thường là kết hợp #fff / #f9fafb. Công cụ bật tính năng này thông qua hộp kiểm "Sọc ngựa vằn", cải thiện đáng kể khả năng đọc cho các bảng dài.

Kiểu nội tuyến (Inline Style)

Viết CSS trực tiếp thông qua thuộc tính style của thẻ HTML, thay vì tham chiếu đến biểu định kiểu bên ngoài. Công cụ mặc định xuất tất cả kiểu dưới dạng kiểu nội tuyến, vì vậy mã có thể được sử dụng ngay mà không cần tệp CSS bổ sung.

Hook lớp CSS

Khả năng khác biệt của công cụ: chèn bất kỳ chuỗi lớp nào (chẳng hạn như lớp Tailwind) vào thẻ `<table>`, tích hợp liền mạch với các khung CSS hiện có. Đây là bản nâng cấp quan trọng so với các đối thủ cạnh tranh.

iframe sandbox

Chế độ hộp cát bảo mật của thẻ HTML iframe, có thể hạn chế thực thi tập lệnh và gửi biểu mẫu. Công cụ sử dụng iframe với sandbox="allow-same-origin" để xem trước HTML được tạo, ngăn chặn việc thực thi tập lệnh ngoài ý muốn.

Tô sáng theo loại

Khả năng khác biệt của công cụ: áp dụng các màu khác nhau dựa trên loại JS của giá trị ô (null / boolean / number / object / string), giúp gỡ lỗi dữ liệu API trực quan hơn.

Lịch sử localStorage

Bộ lưu trữ khóa-giá trị cục bộ do trình duyệt cung cấp (dung lượng khoảng 5-10MB). Công cụ sử dụng localStorage để lưu giữ lâu dài 200 lần nhập gần nhất, có thể nhanh chóng khôi phục sau khi làm mới hoặc vô tình đóng tab.

Bao bọc đáp ứng (Responsive Wrapper)

Bao bọc bảng trong `<div style="overflow-x:auto;max-width:100%;">` bên ngoài, để bảng tự động nhận thanh cuộn ngang trên màn hình hẹp. Được bật theo mặc định, có thể tắt trên thanh công cụ.

Debounce

Kỹ thuật tối ưu hóa hiệu suất frontend: hợp nhất các cuộc gọi lại sự kiện tần suất cao (như đầu vào) thành một lần thực thi sau lần kích hoạt cuối cùng. Công cụ đặt debounce 500ms để tránh độ trễ khi phân tích tệp lớn.

W3C HTML5

Đặc tả tiêu chuẩn HTML được tạo bởi World Wide Web Consortium (W3C). Mã được tạo bởi công cụ tuân thủ đặc tả HTML5 và hiển thị chính xác trong tất cả các trình duyệt hiện đại.

So sánh ba chế độ xử lý lồng nhau

Thanh công cụ cung cấp ba chế độ cho các tình huống lồng nhau khác nhau. Chọn dựa trên độ phức tạp của cấu trúc JSON:

Bảng tra cứu nhanh 14 tùy chọn cấu hình thanh công cụ

Tất cả 14 tùy chọn cấu hình trong thanh công cụ và sự khác biệt trực quan của chúng, để lựa chọn kết hợp nhanh chóng:

Bảng tra cứu nhanh quy tắc tô sáng ô theo loại

Công cụ tự động áp dụng các màu khác nhau dựa trên loại JavaScript của giá trị JSON để nhận dạng loại dữ liệu nhanh chóng:

Privacy & Security

Công cụ JSON sang HTML này chạy tất cả phân tích JSON, làm phẳng lồng nhau, tạo HTML, sao chép và tải xuống hoàn toàn trong trình duyệt của bạn thông qua JavaScript. Dữ liệu JSON đầu vào và mã HTML được tạo không được tải lên bất kỳ máy chủ nào, cũng không được ghi lại, lưu vào bộ nhớ đệm hoặc lưu trữ trên đám mây. Bạn có thể sử dụng công cụ này một cách an toàn với các phản hồi API nhạy cảm chưa phát hành và các trường kinh doanh nội bộ — đóng trang sẽ xóa tất cả dữ liệu.

Authoritative References

• MDNMDN — Phần tử HTML <table>
• MDNMDN — Cơ bản về bảng HTML
• W3CĐặc tả W3C HTML5 — phần tử table
• MDNMDN — thuộc tính iframe sandbox
• MDNMDN — JSON.parse / JSON.stringify
• TailwindTailwind CSS — Kiểu bảng
• BootstrapBootstrap — Bảng