Công cụ JSON & Dữ liệu: Định dạng, Xác thực, Chuyển đổi và Truy vấn JSON Không cần Code

Code editor showing JSON data structure

JSON là ngôn ngữ phổ quát của APIs, file cấu hình, cơ sở dữ liệu và trao đổi dữ liệu. Các lập trình viên làm việc với nó hằng ngày — và họ liên tục cần định dạng, xác thực, chuyển đổi hoặc trích xuất thông tin từ nó. Dưới đây là hướng dẫn đầy đủ về các công cụ xử lý mọi tác vụ JSON phổ biến, tất cả đều chạy trực tiếp trên trình duyệt của bạn.

1. JSON Formatter & Validator

Tác vụ JSON phổ biến nhất: bạn dán một API response đã được rút gọn hoặc dạng thô và cần đọc nó.

JSON Formatter của chúng tôi thực hiện ba việc:

Pretty-print: Chuyển {"name":"Alice","age":30,"scores":[98,87,91]} thành:

{
  "name": "Alice",
  "age": 30,
  "scores": [98, 87, 91]
}

Xác thực: Phát hiện lỗi cú pháp ngay lập tức với số dòng và vị trí chính xác. Các lỗi thường gặp được phát hiện:

Dấu phẩy thừa ở cuối (hợp lệ trong JS objects, không hợp lệ trong JSON)
Dấu nháy đơn thay vì dấu nháy đôi
Keys không được đặt trong dấu nháy
Thiếu dấu phẩy giữa các trường
Dấu ngoặc không khớp

Minify: Nén JSON đã được định dạng về một dòng duy nhất cho API requests hoặc lưu trữ.

2. JSON to TypeScript: Tự động tạo Interfaces

Viết TypeScript interfaces thủ công từ một API response lớn rất tẻ nhạt và dễ mắc lỗi. Công cụ JSON to TypeScript của chúng tôi tự động tạo chúng.

Input:

{
  "user": {
    "id": 1,
    "name": "Alice",
    "email": "alice@example.com",
    "roles": ["admin", "editor"],
    "metadata": {
      "createdAt": "2024-01-15T10:00:00Z",
      "active": true
    }
  }
}

Output:

interface Metadata {
  createdAt: string;
  active: boolean;
}

interface User {
  id: number;
  name: string;
  email: string;
  roles: string[];
  metadata: Metadata;
}

interface Root {
  user: User;
}

Công cụ xử lý các nested objects, arrays, optional fields (nếu một số keys bị thiếu trong input), và union types. Dán một API response thực tế và nhận TypeScript sẵn sàng cho production chỉ trong vài giây.

3. JSON to Zod Schema: Xác thực tại Runtime

TypeScript interfaces chỉ hoạt động ở compile-time. Để xác thực tại runtime — xác thực API responses, dữ liệu form, hoặc config files khi chạy — bạn cần Zod. Công cụ JSON to Zod của chúng tôi tạo ra một Zod schema hoàn chỉnh từ bất kỳ JSON nào.

Từ input tương tự ở trên:

import { z } from "zod";

const MetadataSchema = z.object({
  createdAt: z.string().datetime(),
  active: z.boolean(),
});

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  roles: z.array(z.string()),
  metadata: MetadataSchema,
});

const RootSchema = z.object({
  user: UserSchema,
});

Chú ý suy luận kiểu thông minh — createdAt được nhận diện là chuỗi ISO datetime, email được phát hiện là địa chỉ email. Đây không chỉ là z.string() đơn thuần — chúng là các định dạng được xác thực.

4. JSON Schema Validator: Xác thực Dữ liệu theo Schema

Nếu bạn có JSON Schema (Draft 4, 6, 7, hoặc 2019-09) và cần xác thực dữ liệu theo nó, JSON Schema Validator của chúng tôi chạy xác thực trên trình duyệt bằng thư viện ajv.

Các trường hợp sử dụng:

Xác thực API request/response payloads trong quá trình phát triển
Kiểm tra rằng dữ liệu được tạo ra khớp với schema của bạn
Gỡ lỗi schema validation trước khi triển khai
Xác minh các file cấu hình tuân thủ spec

Công cụ xác thực hiển thị đường dẫn lỗi chi tiết — không chỉ "validation failed" mà còn chính xác trường nào bị lỗi và tại sao:

/user/email: must match format "email"
/user/age: must be >= 0
/user/roles/2: must be string

5. JSON Diff Viewer: Xem Chính xác Những gì đã Thay đổi

Khi gỡ lỗi thay đổi API hoặc so sánh hai snapshot dữ liệu, JSON Diff Viewer của chúng tôi hiển thị chính xác những gì đã được thêm vào, xóa đi, hoặc sửa đổi.

Left (before):            Right (after):
{                         {
  "status": "active",       "status": "inactive",   ← changed
  "count": 42,              "count": 42,
  "tags": ["a", "b"],       "tags": ["a", "b", "c"] ← added "c"
  "deprecated": true        
}                         }                         ← removed "deprecated"

Diff được hiển thị trong tree view với mã màu:

🟢 Xanh lá: đã thêm
🔴 Đỏ: đã xóa
🟡 Vàng: đã sửa đổi
⬜ Xám: không thay đổi

Các trường hợp sử dụng phổ biến:

So sánh hai API responses trước và sau khi thay đổi code
Kiểm tra những gì đã thay đổi trong file cấu hình lớn
Gỡ lỗi tại sao cached response khác với response mới
Xác minh rằng data migration tạo ra output như mong đợi

6. JSONPath Finder: Click để Lấy Path

JSONPath là ngôn ngữ truy vấn cho JSON — tương đương với XPath cho XML. Khi bạn cần JSONPath đến một giá trị lồng nhau cụ thể, JSON Path Finder của chúng tôi cho phép bạn click vào bất kỳ giá trị nào trong tree và hiển thị path ngay lập tức.

{
  "store": {
    "books": [
      { "title": "Clean Code", "price": 29.99 },
      { "title": "The Pragmatic Programmer", "price": 39.99 }
    ]
  }
}

Click vào 29.99 → Path: $.store.books[0].price Click vào "The Pragmatic Programmer" → Path: $.store.books[1].title

Paths được hiển thị ở cả dạng dot notation ($.store.books[0].price) và bracket notation ($['store']['books'][0]['price']), giúp dễ dàng sử dụng trong JavaScript, Python, hoặc bất kỳ thư viện JSONPath nào.

7. JSON to CSV / CSV to JSON: Chuyển đổi giữa các Định dạng

APIs trả về JSON; bảng tính yêu cầu CSV. CSV ↔ JSON Converter của chúng tôi xử lý cả hai chiều.

JSON array → CSV:

[
  { "name": "Alice", "age": 30, "city": "NYC" },
  { "name": "Bob", "age": 25, "city": "LA" }
]

Trở thành:

name,age,city
Alice,30,NYC
Bob,25,LA

CSV → JSON: Chiều ngược lại — nhận một CSV có headers và tạo ra một mảng các objects. Xử lý các trường có dấu nháy, dấu phẩy trong giá trị, và các kiểu kết thúc dòng khác nhau.

Để có nhiều tính năng hơn với dữ liệu CSV, hãy dùng công cụ SQL on CSV để chạy truy vấn SELECT trực tiếp trên các file CSV đã tải lên — lọc, sắp xếp và join mà không cần viết một dòng Python nào.

8. JSON to SQL: Tạo INSERT Statements

Khi điền dữ liệu JSON vào cơ sở dữ liệu, JSON to SQL Converter của chúng tôi tạo ra các INSERT statements cho bất kỳ SQL dialect nào.

Input:

[
  { "id": 1, "name": "Alice", "email": "alice@example.com" },
  { "id": 2, "name": "Bob", "email": "bob@example.com" }
]

Output (PostgreSQL):

INSERT INTO users (id, name, email) VALUES
(1, 'Alice', 'alice@example.com'),
(2, 'Bob', 'bob@example.com');

Hỗ trợ các dialect MySQL, PostgreSQL, SQLite, và SQL Server — xử lý đúng kiểu dấu nháy, giá trị NULL, và cách biểu diễn boolean cho từng loại.

9. JSON Table Viewer: Xem JSON Arrays dạng Bảng tính

Đôi khi bạn không cần viết truy vấn — bạn chỉ muốn xem JSON array của mình dưới dạng bảng. JSON Table Viewer của chúng tôi hiển thị bất kỳ JSON array of objects nào dưới dạng bảng có thể sắp xếp và tìm kiếm.

Click vào tiêu đề cột để sắp xếp. Gõ vào ô tìm kiếm để lọc hàng. Hoạt động với arrays ở bất kỳ kích thước nào, xử lý nested objects bằng cách làm phẳng chúng, và tô sáng các từ khóa tìm kiếm khớp.

Tham khảo Nhanh

Tác vụ	Công cụ
Định dạng/xác thực JSON	JSON Formatter
Tạo TypeScript interfaces	JSON to TypeScript
Tạo Zod validation schema	JSON to Zod
Xác thực theo JSON Schema	JSON Schema Validator
So sánh hai JSON objects	JSON Diff Viewer
Tìm JSONPath của một giá trị	JSON Path Finder
Chuyển đổi JSON ↔ CSV	CSV ↔ JSON Converter
Tạo SQL INSERT statements	JSON to SQL
Xem JSON dưới dạng bảng	JSON Table Viewer

Điểm chung xuyên suốt: tất cả các công cụ này chạy hoàn toàn trên trình duyệt của bạn. Các JSON payload lớn không bao giờ rời khỏi máy của bạn, giúp chúng an toàn để sử dụng với dữ liệu production, API keys nhúng trong responses, và bất kỳ payload nhạy cảm nào mà bạn không muốn được xử lý bởi máy chủ bên thứ ba.