Định Dạng và Xác Thực JSON: Tài Liệu Tham Khảo Nhanh Cho Developer

JSON (JavaScript Object Notation) là ngôn ngữ chung của các web API. Đơn giản theo thiết kế — nhưng chỉ một dấu phẩy bị thiếu hay dấu ngoặc không khớp cũng có thể âm thầm làm hỏng toàn bộ ứng dụng. Dưới đây là mọi thứ bạn cần để làm việc với JSON một cách tự tin.

Cú pháp JSON trong 90 giây

JSON có đúng sáu kiểu giá trị:

{
  "string": "hello world",
  "number": 42,
  "boolean": true,
  "null_value": null,
  "array": [1, 2, 3],
  "object": { "nested": "value" }
}

Những quy tắc hay bị bỏ sót:

• Các key phải là chuỗi được đặt trong dấu ngoặc kép — {name: "Alice"} không phải JSON hợp lệ
• Không có dấu phẩy thừa ở cuối — [1, 2, 3,] là không hợp lệ
• Không có comment — JSON không có cú pháp // hay /* */
• Chuỗi phải dùng dấu ngoặc kép — dấu ngoặc đơn không được chấp nhận
• Số không được có số 0 đứng đầu — 007 là không hợp lệ

Những lỗi JSON phổ biến nhất

1. Dấu phẩy thừa ở cuối

// Invalid
{ "a": 1, "b": 2, }

// Valid
{ "a": 1, "b": 2 }

2. Chuỗi dùng dấu ngoặc đơn

// Invalid
{ 'name': 'Alice' }

// Valid
{ "name": "Alice" }

3. Key không có dấu ngoặc kép

// Invalid
{ name: "Alice" }

// Valid
{ "name": "Alice" }

4. Giá trị Undefined hoặc NaN — Những giá trị JavaScript này không tồn tại trong JSON. Hãy dùng null thay thế.

Định dạng vs. rút gọn

JSON được trình bày đẹp (formatted) sử dụng thụt lề và xuống dòng để dễ đọc:

{
  "user": {
    "id": 1,
    "name": "Alice"
  }
}

JSON được rút gọn loại bỏ tất cả khoảng trắng:

{"user":{"id":1,"name":"Alice"}}

Dùng JSON đã định dạng trong các file cấu hình và mã nguồn. Dùng JSON rút gọn trong các phản hồi API và lưu trữ để giảm kích thước payload. Công cụ JSON Formatter của chúng tôi chuyển đổi giữa hai chế độ chỉ với một cú nhấp.

Xác thực với JSON Schema

JSON Schema cho phép bạn định nghĩa cấu trúc mong đợi của một tài liệu JSON và xác thực dữ liệu theo đó. Điều này rất quan trọng cho các hợp đồng API và xác thực file cấu hình.

Một schema đơn giản:

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "required": ["name", "age"],
  "properties": {
    "name": { "type": "string" },
    "age": { "type": "integer", "minimum": 0 }
  }
}

Schema này từ chối bất kỳ object nào thiếu name hoặc age, hoặc khi age là số âm. Công cụ JSON Schema Validator cho phép bạn dán schema và dữ liệu để xác thực theo thời gian thực.

Tạo TypeScript types từ JSON

Nếu bạn nhận được một phản hồi JSON từ API và cần TypeScript interfaces, hãy dán JSON vào công cụ JSON to TypeScript của chúng tôi. Công cụ sẽ tự động suy luận kiểu dữ liệu từ cấu trúc:

Đầu vào:

{ "id": 1, "name": "Alice", "active": true, "tags": ["admin"] }

Đầu ra:

interface Root {
  id: number;
  name: string;
  active: boolean;
  tags: string[];
}

JSONPath: truy vấn dữ liệu lồng nhau

JSONPath với JSON cũng giống như XPath với XML — một ngôn ngữ truy vấn để trích xuất giá trị từ các cấu trúc lồng nhau. Cú pháp cơ bản:

Biểu thức	Ý nghĩa
$.store.book	Key book bên trong store
$.store.book[0]	Cuốn sách đầu tiên
$.store.book[*].title	Tất cả tiêu đề sách
$..price	Tất cả giá trị price ở bất kỳ đâu trong tài liệu

Công cụ JSON Path Finder cho phép bạn nhấp vào bất kỳ giá trị nào trong cây JSON được hiển thị và tự động sao chép đường dẫn.

So sánh hai JSON object

Khi debug các thay đổi API hoặc sự sai lệch trong cấu hình, bạn cần xem điều gì đã thay đổi giữa hai JSON object. Công cụ JSON Diff Viewer làm nổi bật các trường được thêm, xóa và sửa đổi theo từng cột song song.

Chuyển đổi JSON sang Zod schema

Nếu bạn dùng Zod để xác thực runtime trong TypeScript, công cụ JSON to Zod sẽ chuyển đổi JSON mẫu thành một Zod schema sẵn sàng sử dụng với khả năng suy luận thông minh cho các trường email, URL và datetime.

Tổng kết

JSON đơn giản nhưng không khoan nhượng. Luôn xác thực trước khi parse, sử dụng TypeScript interfaces để phát hiện sự không khớp cấu trúc ngay lúc biên dịch, và luôn có sẵn một công cụ formatter để debug các phản hồi API. Những thói quen này giúp ngăn chặn cả một loạt lỗi runtime.