Định dạng JSON

JSON formatter là gì?

JSON formatter (còn gọi là JSON beautifier hay pretty-printer) nhận JSON viết liền hoặc lộn xộn và biến nó thành dữ liệu có thụt lề, dễ đọc. Đây là một trong những công cụ lập trình được dùng nhiều nhất: khi xem response của API, đọc tệp cấu hình, gỡ lỗi log, so sánh dữ liệu test và chuyển dữ liệu giữa code frontend và backend.

JSON là định dạng nghiêm ngặt: khóa phải nằm trong dấu ngoặc kép, chuỗi phải nằm trong dấu ngoặc kép, dấu phẩy phải đặt đúng chỗ, và mọi { hoặc [ mở ra đều phải được đóng lại. Formatter giúp bạn thấy rõ cấu trúc đó, còn trình kiểm tra tích hợp cho bạn biết chính xác cú pháp hỏng ở đâu nếu có lỗi.

JSON là viết tắt của JavaScript Object Notation. Dù bắt nguồn từ JavaScript, gần như mọi ngôn ngữ lập trình đều hỗ trợ sẵn việc đọc và ghi JSON, nên nó trở thành cách mặc định để trao đổi dữ liệu có cấu trúc trên web.

Bạn sẽ học được gì khi dùng công cụ

• Đối tượng dùng {} cho các trường có tên, mảng dùng [] cho danh sách có thứ tự, và cả hai đều có thể lồng vào nhau với độ sâu bất kỳ.
• JSON đã làm đẹp và JSON đã thu gọn là *cùng một dữ liệu*: khoảng trắng chỉ thay đổi độ dễ đọc, không thay đổi ý nghĩa. Máy chủ thường trả về JSON thu gọn để tiết kiệm dung lượng.
• Giá trị JSON chỉ có sáu kiểu: chuỗi, số, boolean, null, đối tượng và mảng. Không có undefined, không có hàm và không có chú thích.
• Lỗi kiểm tra thường chỉ vào gần chỗ có vấn đề, nhưng lỗi thật (một dấu ngoặc chưa đóng, thiếu một dấu ngoặc kép) có thể nằm sớm hơn vài ký tự.

Cách định dạng JSON từng bước

1. 1

   Dán JSON vào ô nhập

   Sao chép JSON từ response của API, tệp log hoặc tệp cấu hình rồi dán vào bên trái. Formatter nhận cả đầu vào đã thu gọn lẫn đầu vào mới định dạng một phần.

2. 2

   Chọn độ rộng thụt lề

   Hai dấu cách là kiểu phổ biến nhất; bốn dấu cách cũng được dùng rộng rãi. Chọn kiểu khớp với quy ước sẵn có của dự án.

3. 3

   Đọc kết quả kiểm tra

   Nếu JSON hợp lệ, kết quả đã định dạng hiện ở bên phải. Nếu không, thông báo lỗi cho bạn biết dòng và ký tự nơi việc phân tích thất bại.

4. 4

   Khám phá chế độ xem dạng cây

   Dùng cây thu gọn được để gập các đối tượng và mảng lồng sâu. Đây là cách nhanh nhất để hiểu cấu trúc của một response API lạ.

5. 5

   Sao chép hoặc thu gọn kết quả

   Sao chép phiên bản đã làm đẹp vào code hoặc tài liệu, hoặc thu gọn lại thành một dòng để lưu trữ và truyền qua mạng.

Tra cứu nhanh cú pháp JSON

Toàn bộ các thành phần cơ bản của JSON. Mọi thứ ngoài danh sách này đều không phải JSON hợp lệ. Đặc tả: RFC 8259 và ECMA-404.

Ví dụ JSON để thử

{"user":{"id":7,"name":"Maya"},"skills":["HTML","JavaScript"]}

{  "user": {    "id": 7,    "name": "Maya"  },  "skills": ["HTML", "JavaScript"]}

{  "name": "Coddy",  "active": true,}

{  "count": 3,  "countText": "3",  "enabled": true}

{  "data": {    "orders": [      { "id": 101, "items": [{ "sku": "A", "qty": 2 }] },      { "id": 102, "items": [] }    ]  }}

Lỗi JSON thường gặp

• Dùng dấu nháy đơn thay vì dấu ngoặc kép quanh khóa hoặc chuỗi: JSON chỉ cho phép dấu ngoặc kép.
• Coi JSON như đối tượng JavaScript: chú thích, hàm và undefined không hợp lệ trong JSON, còn dấu phẩy thừa ở cuối sẽ gây lỗi phân tích.
• Quên rằng số trong JSON không được có + ở đầu, không có số 0 ở đầu (trừ chính 0), và không được đặt trong dấu ngoặc kép nếu bạn thật sự muốn kiểu số.
• Dán token, dữ liệu khách hàng hoặc khóa bí mật production vào công cụ có tải đầu vào lên máy chủ. Formatter của Coddy chạy cục bộ nên an toàn, nhưng hãy luôn kiểm tra trước khi dùng trang web của bên thứ ba.

Câu hỏi thường gặp về JSON formatter