JSON sang Markdown

Đề xuất Liên quan

Về chuyển đổi JSON sang Markdown và bảng Markdown

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

• Tạo tài liệu kỹ thuật — chuyển đổi dữ liệu JSON từ API thành bảng Markdown để hiển thị
• GitHub README — hiển thị dữ liệu cấu hình, mô tả tham số, ví dụ phản hồi API
• Báo cáo dữ liệu — trình bày kết quả phân tích trong bảng Markdown (xuất sang Notion/Confluence)
• Tài liệu API (Swagger/Redoc/OpenAPI) — hiển thị rõ cấu trúc dữ liệu
• Phần tài liệu cho trình tạo trang tĩnh (VuePress/Docusaurus/Hexo)
• Chia sẻ dữ liệu có cấu trúc trong Slack/Discord/tin nhắn doanh nghiệp
• Xem trước bảng trong VS Code/JetBrains IDE Markdown Preview
• Cộng tác kiểm soát phiên bản: bảng Markdown là văn bản thuần, thân thiện với git diff
• Giáo dục: chuyển bài tập JSON lồng của sinh viên thành bảng thống nhất để chấm điểm
• Mẫu email (ứng dụng email hỗ trợ Markdown: Bear Mail, HEY)
• Nhập vào Notion: tạo bảng Markdown → dán vào Notion
• Quốc tế hóa: cấu trúc chung cho tài liệu sau khi flatten + Beautify keys

Cách Sử dụng

1. Dán mảng JSON (khuyên dùng) hoặc đối tượng lồng vào trình soạn thảo bên trái, hoặc nhấp 'Sample' để tải mẫu, hoặc 'Upload' để tải tệp .json/.txt lên
2. Chọn chế độ xử lý lồng trên thanh công cụ (khuyên dùng 'Flatten'), nếu lồng sâu thì tăng Max Depth
3. Nếu cần dấu phân cách tùy chỉnh, nhập vào trường Separator (mặc định `.`, có thể đổi thành `_` / `-` / `/`)
4. Chọn Strategy: mảng đơn giản dùng 'Single', nhiều mảng dùng 'Multi' tự động chia, buộc chia dùng 'Split'
5. Chọn tùy chọn kiểu: Sort columns, Beautify keys, Exclude empty, Include Caption, Include Index
6. Chọn căn chỉnh: trái / giữa / phải
7. Nhấp 'Convert' (hoặc nhấn Enter) để kích hoạt chuyển đổi — có bảo vệ debounce 500ms khi nhập
8. Xem mã bảng Markdown đã tạo ở bên phải, nếu hài lòng nhấp 'Copy' để sao chép và dán vào tài liệu Markdown, hoặc 'Download' để tải xuống dưới dạng table.md

Tính năng

• Tự động flatten đối tượng lồng: mở rộng đệ quy `{user:{name,age}}` thành `user.name`, `user.age` với ký hiệu dấu chấm (độ sâu 1-6), không cần viết script flatten thủ công
• 4 chế độ xử lý lồng: Flatten (khuyên dùng, độ sâu điều chỉnh được) / First Key (đối tượng lồng dưới dạng JSON cột đơn) / Stringify (đối tượng lồng thành chuỗi JSON) / Raw JSON (mỗi dòng là khối JSON hoàn chỉnh)
• Chia bảng thông minh: nhận diện trường mảng cấp cao nhất (`users`, `orders`), tự động chia thành các bảng Markdown độc lập với tiêu đề ###, lý tưởng cho dữ liệu nghiệp vụ phức tạp
• Dấu phân cách tùy chỉnh: mặc định `.` (tương thích Lodash/MongoDB), có thể đổi thành `_` / `-` / `/` trên thanh công cụ
• Làm đẹp tên khóa (camelCase/snake_case → Title Case): `user_name` → `User Name`, `userProfileId` → `User Profile Id` — tiêu đề trở nên dễ đọc cho con người
• Công tắc sắp xếp cột: sắp xếp tất cả cột tiêu đề theo thứ tự bảng chữ cái chỉ với một cú nhấp, giữ thứ tự cột ổn định khi so sánh tài liệu
• Loại trừ cột trống: tự động phát hiện và loại trừ cột có tất cả hàng là null/undefined/chuỗi rỗng
• 3 chế độ căn chỉnh: trái (`:-`) / giữa (`:-:`) / phải (`-:`), chuyển đổi bằng nút radio, tuân thủ GFM
• Công tắc cột chỉ mục hàng: tùy chọn thêm cột `#` ở ngoài cùng bên trái (văn bản tiêu đề có thể tùy chỉnh)
• Công tắc tiêu đề Caption: tự động tạo `### TênDữLiệu` tiêu đề cấp ba (H3) phía trên mỗi bảng, cấu trúc tài liệu rõ ràng, hỗ trợ SEO
• Thoát nhận biết kiểu: `|` / `\` / ký tự xuống dòng trong ô được tự động thoát thành `\|` / `\\` / `<br>`
• Phản hồi thống kê tạo: thanh trạng thái dưới cùng hiển thị trực tiếp 'Đã tạo N bảng × M hàng × K cột' + số byte
• Dữ liệu mẫu + tải tệp lên: 3 mẫu người dùng lồng tích hợp tải bằng một cú nhấp, hỗ trợ kéo thả hoặc tải lên .json/.txt
• Xử lý hoàn toàn cục bộ trong trình duyệt: tất cả phân tích, flatten, tạo Markdown, sao chép/tải xuống đều hoàn tất trong trình duyệt, dữ liệu không tải lên máy chủ

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 flatten lồng (tương đương logic Flatten của công cụ)
function flattenObject(obj, prefix = '', sep = '.', result = {}, depth = 0, maxDepth = 3) {
  if (!obj || typeof obj !== 'object' || Array.isArray(obj)) return result;
  if (depth >= maxDepth) { if (prefix) result[prefix] = JSON.stringify(obj); return 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, depth + 1, maxDepth);
    else result[key] = v;
  }
  return result;
}
// ... [truncated]

from flask import Flask, jsonify
import json

app = Flask(__name__)

def flatten(obj, prefix='', sep='.', result=None, depth=0, max_depth=3):
    if result is None: result = {}
    if not isinstance(obj, dict) or depth >= max_depth:
        if prefix: result[prefix] = json.dumps(obj) if isinstance(obj, (dict, list)) else obj
        return result
    for k, v in obj.items():
        key = f"{prefix}{sep}{k}" if prefix else k
        if isinstance(v, dict): flatten(v, key, sep, result, depth + 1, max_depth)
        else: result[key] = v
    return result
# ... [truncated]

# 1) Lấy 50 PR đã merge qua gh CLI
PR_JSON=$(gh pr list --state merged --limit 50 --json number,title,author,labels,mergedAt)
# 2) Flatten mảng labels lồng qua jq
echo "$PR_JSON" | jq 'map({number,title,author:.author.login,labels:(.labels|map(.name)|join(", ")),mergedAt})' > prs.json
# 3) Mở công cụ, dán nội dung, Strategy: Single, chọn Sort columns + Include Index
# 4) Tạo Release
gh release create v2.1.0 -F RELEASE.md -t "v2.1.0"

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

Xử lý sự cố

Thuật ngữ

Bảng Markdown

Bảng văn bản thuần từ ký tự | và -, được định nghĩa bởi đặc tả GFM. Mã công cụ tuân thủ nghiêm ngặt cú pháp này.

GFM

GitHub Flavored Markdown — phương ngữ mở rộng của GitHub trên Markdown tiêu chuẩn, bao gồm bảng, gạch ngang, danh sách nhiệm vụ, liên kết tự động.

CommonMark

Đặc tả tiêu chuẩn hóa của cú pháp Markdown (2014). Cú pháp bảng GFM mở rộng CommonMark.

Mảng JSON

Tập hợp đối tượng trong ngoặc vuông [...]. Mỗi đối tượng trở thành một hàng bảng. Mảng rỗng không tạo bảng.

Đối tượng JSON

Tập hợp cặp khóa-giá trị trong ngoặc nhọn {}. Khóa trở thành tiêu đề, giá trị trở thành ô.

Flatten lồng

Mở rộng đệ quy đối tượng lồng thành tên khóa phẳng phân tách bằng dấu chấm. Hỗ trợ độ sâu 1-6, dấu phân cách có thể cấu hình.

Làm đẹp khóa (Beautify Keys)

Chuyển đổi snake_case/camelCase thành Title Case: user_name → User Name.

Chia bảng thông minh

Nhận diện trường mảng cấp cao nhất và tự động tạo bảng độc lập với tiêu đề ###.

Cú pháp căn chỉnh

Hàng phân cách GFM hỗ trợ điều khiển căn chỉnh qua :: :- trái, :-: giữa, -: phải.

Cột chỉ mục hàng

Cột đánh số # ở ngoài cùng bên trái (bắt đầu từ 1), tiêu đề có thể tùy chỉnh.

Caption

Tiêu đề H3 (###) trong Markdown, tự động thêm phía trên mỗi bảng.

Sắp xếp cột

Sắp xếp tất cả cột theo bảng chữ cái.

Loại trừ cột trống

Tự động loại trừ cột có tất cả hàng là null/undefined/rỗng.

Thoát Markdown (Escape)

Chuyển đổi ký tự đặc biệt (|, \, xuống dòng) thành dạng an toàn (\|, \\, <br>).

Lịch sử cục bộ (localStorage)

Kho lưu trữ khóa-giá trị cục bộ của trình duyệt (~5-10MB).

Debounce

Kỹ thuật tối ưu hóa: gộp sự kiện tần suất cao thành một lần thực thi. Độ trễ 500ms.

Privacy & Security

Tất cả thao tác phân tích JSON, flatten lồng, tạo Markdown, sao chép và tải xuống trong công cụ này đều được thực hiện hoàn toàn cục bộ trong trình duyệt qua JavaScript. Dữ liệu JSON đầu vào và mã Markdown được tạo không được tải lên máy chủ, không được ghi lại, lưu đệm hoặc lưu trữ đám mây. Đóng trang sẽ xóa tất cả dữ liệu.

Authoritative References

• GitHubĐặc tả GitHub Flavored Markdown — Bảng
• CommonMarkĐặc tả CommonMark
• MarkdownTài liệu chính thức Markdown (Daring Fireball)
• MDNMDN — JSON.parse / JSON.stringify
• GitHubTài liệu GitHub — Tổ chức thông tin trong Markdown
• LodashLodash — flatten / flattenDeep
• jqHướng dẫn jq — Xử lý đối tượng lồng