JSON Formatter là gì? Cách format JSON đẹp 2026

Tháng 6, 2026 · 10 phút đọc

JSON (JavaScript Object Notation) là định dạng dữ liệu phổ biến nhất trong lập trình web hiện đại. Khi làm việc với API, cấu hình ứng dụng, hoặc dữ liệu từ database, bạn sẽ liên tục gặp JSON. Tuy nhiên, JSON từ API thường ở dạng compact (không có khoảng trắng) rất khó đọc. JSON Formatter là công cụ giúp bạn format, validate, và làm đẹp JSON một cách nhanh chóng. Bài viết này sẽ hướng dẫn bạn từ A đến Z về JSON và cách sử dụng JSON Formatter hiệu quả.

JSON là gì?

JSON là viết tắt của JavaScript Object Notation - một định dạng trao đổi dữ liệu dựa trên cú pháp JavaScript. Mặc dù có nguồn gốc từ JavaScript, JSON là định dạng độc lập và được hỗ trợ bởi几乎所有 ngôn ngữ lập trình hiện đại: Python, Java, C#, PHP, Ruby, Go, Rust...

JSON chỉ có 6 kiểu dữ liệu cơ bản:

JSON Formatter là gì?

JSON Formatter (còn gọi là JSON Pretty Print) là công cụ giúp chuyển đổi JSON từ dạng khó đọc sang dạng được format đẹp với:

• Indent (thụt lề): Hiển thị cấu trúc phân cấp rõ ràng
• Xuống dòng: Mỗi key-value trên một dòng riêng
• Syntax highlighting: Tô màu các kiểu dữ liệu khác nhau
• Validate: Kiểm tra và báo lỗi nếu JSON không hợp lệ

JSON trước khi format (compact):

{"id":1,"name":"Nguyễn Văn A","email":"a@example.com","address":{"city":"HCM","district":"Q1"},"skills":["JavaScript","Python","SQL"],"isActive":true,"lastLogin":null}

JSON sau khi format (pretty print):

{
  "id": 1,
  "name": "Nguyễn Văn A",
  "email": "a@example.com",
  "address": {
    "city": "HCM",
    "district": "Q1"
  },
  "skills": [
    "JavaScript",
    "Python",
    "SQL"
  ],
  "isActive": true,
  "lastLogin": null
}

Sử dụng công cụ JSON Formatter của ToolHub để format JSON ngay lập tức. Chỉ cần dán JSON vào ô nhập, công cụ sẽ tự động format và highlight syntax.

Cách sử dụng JSON Formatter

1. Truy cập ToolHub JSON Formatter
2. Dán hoặc nhập dữ liệu JSON vào ô bên trái
3. Công cụ sẽ tự động format và hiển thị kết quả
4. Nếu JSON có lỗi, công cụ sẽ báo vị trí lỗi chính xác
5. Nhấn "Copy" để sao chép kết quả đã format

Format JSON vs Minify JSON

Khi nào dùng Format: Khi debug API, đọc cấu hình, code review, hoặc học tập. JSON format dễ đọc hơn rất nhiều so với JSON compact.

Khi nào dùng Minify: Khi deploy lên production, gửi qua API, hoặc lưu trữ. JSON minified nhỏ hơn 30-50% giúp tiết kiệm băng thông và bộ nhớ.

Những lỗi JSON thường gặp

1. Thiếu dấu phẩy giữa các phần tử

// SAI - thiếu dấu phẩy sau "An"
{
  "name": "An"
  "age": 25
}

// ĐÚNG
{
  "name": "An",
  "age": 25
}

2. Thừa dấu phẩy ở phần tử cuối

// SAI - thừa dấu phẩy sau 25
{
  "name": "An",
  "age": 25,
}

// ĐÚNG
{
  "name": "An",
  "age": 25
}

3. Sử dụng dấu nháy đơn thay vì kép

// SAI - JSON chỉ chấp nhận dấu nháy kép
{'name': 'An'}

// ĐÚNG
{"name": "An"}

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

// SAI
{
  name: "An"
}

// ĐÚNG
{
  "name": "An"
}

5. Sử dụng comment

// SAI - JSON không hỗ trợ comment
{
  // Tên người dùng
  "name": "An"
}

// ĐÚNG - dùng trường _note nếu cần ghi chú
{
  "_note": "Tên người dùng",
  "name": "An"
}

6. Sử dụng undefined hoặc NaN

// SAI
{
  "value": undefined,
  "number": NaN
}

// ĐÚNG - dùng null
{
  "value": null,
  "number": null
}

JSON Validator - Kiểm tra tính hợp lệ

JSON Validator không chỉ kiểm tra cú pháp mà còn có thể kiểm tra cấu trúc dữ liệu theo JSON Schema. Sử dụng ToolHub JSON Formatter để:

• Kiểm tra cú pháp: Phát hiện thiếu dấu phẩy, ngoặc, dấu nháy sai
• Báo lỗi chi tiết: Hiển thị dòng và vị trí chính xác của lỗi
• Suggest sửa lỗi: Đề xuất cách sửa cho một số lỗi phổ biến
• Kiểm tra cấu trúc: Validate theo JSON Schema nếu cần

Ứng dụng thực tế của JSON

1. REST API

Hầu hết REST API hiện đại sử dụng JSON để truyền dữ liệu:

// Response từ API
{
  "status": "success",
  "data": {
    "users": [
      {"id": 1, "name": "An", "email": "an@example.com"},
      {"id": 2, "name": "Bình", "email": "binh@example.com"}
    ],
    "total": 2,
    "page": 1
  }
}

2. Cấu hình ứng dụng

Nhiều framework và công cụ sử dụng JSON cho file cấu hình:

// package.json (Node.js)
{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js",
    "test": "jest"
  },
  "dependencies": {
    "express": "^4.18.0"
  }
}

3. Lưu trữ dữ liệu

LocalStorage, sessionStorage, và nhiều database NoSQL sử dụng JSON:

// Lưu vào LocalStorage
localStorage.setItem('user', JSON.stringify({
  name: 'An',
  preferences: {theme: 'dark', lang: 'vi'}
}));

// Đọc từ LocalStorage
const user = JSON.parse(localStorage.getItem('user'));

JSON so với các định dạng khác

Mẹo làm việc với JSON hiệu quả

• Luôn validate trước khi sử dụng: Dùng JSON Formatter để kiểm tra tính hợp lệ
• Format khi debug: JSON compact rất khó đọc, hãy format để dễ tìm lỗi
• Minify khi deploy: Loại bỏ khoảng trắng để giảm kích thước file
• Sử dụng JSON Schema: Để validate cấu trúc dữ liệu tự động trong ứng dụng
• Tránh JSON quá lớn: File trên 10MB nên chia nhỏ hoặc dùng streaming parser
• Bảo mật: Không lưu mật khẩu, token trong JSON không mã hóa
• Sử dụng IDE: VS Code, IntelliJ đều có built-in JSON formatter

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

Bài viết liên quan

• Cách mã hóa ảnh thành Base64 online
• CSS Minifier - Tối ưu CSS cho website nhanh
• Đếm từ SEO: Bài viết bao nhiêu từ là tốt nhất?