JSON Viewer: đọc JSON lớn dạng cây thay vì dò từng dấu ngoặc
JSON Viewer này biến một khối JSON dài, lồng nhiều cấp thành cây có thể thu gọn và mở rộng, mỗi node gắn nhãn kiểu dữ liệu và số phần tử. Bạn dán phản hồi API, file cấu hình hay file xuất dữ liệu (đến 20 MB), tìm khóa hoặc giá trị cần xem, bấm vào node để lấy JSONPath và giá trị. Mọi thứ chạy trong trình duyệt, dữ liệu không rời khỏi máy.
Tính năng nổi bật
- Cây JSON thu gọn, mở rộng từng nhánh; nút mở hết, thu gọn hết và mở đến đúng cấp 1 đến 10
- Nhãn kiểu dữ liệu cho từng node (object, array, string, number, bool, null) kèm số khóa hoặc số phần tử
- Tìm trong cả tên khóa lẫn giá trị, không phân biệt hoa thường, tô sáng chỗ khớp, nút Trước và Sau để nhảy giữa các kết quả
- Bấm vào node để xem và sao chép JSONPath ($.nhanVien[0].hoTen), đường dẫn JavaScript và giá trị đầy đủ
- Báo lỗi cú pháp bằng tiếng Việt với số dòng, số cột và đoạn trích có dấu mũ chỉ đúng vị trí sai
- Cảnh báo số nguyên vượt 2^53 - 1 và số thập phân quá 17 chữ số mà JavaScript sẽ làm tròn, liệt kê từng số và giá trị bị đọc sai
- Phát hiện khóa trùng trong cùng một object, vì trình duyệt chỉ giữ giá trị xuất hiện sau cùng
- Cuộn ảo và chỉ hiện 100 phần tử đầu mỗi mảng, có nút Xem thêm, nên file vài chục nghìn dòng vẫn mượt
Vì sao cần xem JSON dạng cây khi đã có trình định dạng
Định dạng JSON (thêm thụt lề, xuống dòng) giúp đọc được một object vài chục dòng, nhưng phản hồi API thực tế thường dài hàng nghìn dòng: danh sách đơn hàng, mỗi đơn có khách hàng, địa chỉ, sản phẩm, lịch sử trạng thái. Khi đó, cuộn qua văn bản đã định dạng để tìm trường giaoHang.trangThai của đơn thứ 37 rất dễ lạc, và càng khó biết mình đang nằm trong nhánh nào. Dạng cây giải quyết đúng chỗ đó: thu gọn những nhánh không quan tâm, mở dần nhánh cần xem, nhìn ngay mảng có bao nhiêu phần tử, object có bao nhiêu khóa. Khi tìm thấy giá trị, bạn cần đường dẫn chính xác để viết code hoặc cấu hình bộ lọc, và JSON Viewer đưa ra JSONPath, đường dẫn JavaScript chỉ bằng một cú bấm. Nếu chỉ cần định dạng hay rút gọn văn bản JSON, hãy dùng JSON Formatter; công cụ này tập trung vào việc khám phá cấu trúc.
Lợi ích khi sử dụng
- Tìm đúng trường cần xem trong phản hồi API dài mà không cuộn hàng nghìn dòng
- Lấy đường dẫn chính xác để viết code, cấu hình bộ lọc hay mapping dữ liệu, tránh gõ sai
- Phát hiện sớm lỗi mất chính xác của ID lớn trước khi nó gây sai dữ liệu trên hệ thống
- Xem file JSON có dữ liệu khách hàng mà không phải tải lên dịch vụ bên ngoài
- Hiểu nhanh cấu trúc một API mới: có những khóa nào, mảng nào, lồng bao nhiêu cấp
- Dùng được bằng bàn phím: mũi tên lên xuống để đi, phải trái để mở và thu gọn
Cách xem JSON dạng cây
- 1Dán JSON vào ô nhập, hoặc bấm Mở file JSON để chọn file .json trên máy (tối đa 20 MB). Dữ liệu vừa phải được phân tích ngay khi dán.
- 2Nếu JSON sai cú pháp, đọc thông báo lỗi có số dòng, số cột và đoạn trích để sửa đúng chỗ, rồi bấm Xem dạng cây.
- 3Dùng Mở đến cấp, Mở hết hoặc Thu gọn hết để điều chỉnh độ chi tiết; bấm mũi tên cạnh node để mở từng nhánh.
- 4Gõ từ khóa vào ô tìm kiếm, nhấn Enter hoặc nút Sau để đi qua từng kết quả; cây tự mở nhánh chứa kết quả.
- 5Bấm vào một dòng để xem JSONPath, đường dẫn JavaScript và giá trị ở khung bên phải, rồi bấm Chép.
- 6Đọc khối cảnh báo nếu có: số quá lớn bị làm tròn hoặc khóa trùng cần báo lại cho bên cung cấp API.
JSONPath và đường dẫn JavaScript khác nhau thế nào
JSONPath là cú pháp mô tả vị trí trong tài liệu JSON, bắt đầu bằng dấu $ đại diện cho gốc. Khóa là tên hợp lệ thì viết sau dấu chấm, ví dụ $.nhanVien[0].hoTen; khóa có dấu cách, dấu gạch ngang hay bắt đầu bằng số thì phải đặt trong ngoặc vuông và nháy đơn, ví dụ $.cauHinh['ghi chú']. Cú pháp này dùng trong nhiều công cụ kiểm thử API, hệ thống ghi log, bộ lọc của các nền tảng tự động hóa. Đường dẫn JavaScript là đoạn mã truy cập trực tiếp trong code, ví dụ data.nhanVien[0].hoTen, dùng dấu ngoặc kép cho khóa đặc biệt. Công cụ tạo cả hai từ cùng một node nên bạn chọn đúng dạng cho nơi sẽ dán vào. Muốn chạy biểu thức JSONPath có bộ lọc như $..price hay [?(@.gia > 100000)], hãy dùng JSON Path Finder.
Vì sao số lớn trong JSON bị sai khi đọc bằng JavaScript
Chuẩn JSON không giới hạn độ dài của số, nhưng JavaScript lưu mọi số dưới dạng dấu phẩy động 64 bit, chỉ biểu diễn chính xác số nguyên đến 9.007.199.254.740.991 (2^53 - 1). Số lớn hơn sẽ bị làm tròn về số gần nhất biểu diễn được: 9007199254740993 được đọc thành 9007199254740992, còn 12345678901234567890 thành 12345678901234567000. Lỗi này hay gặp với ID dạng Snowflake của các mạng xã hội, mã giao dịch ngân hàng, số tài khoản dài. JSON Viewer quét văn bản gốc trước khi phân tích, nên phát hiện được các số này và cho biết giá trị bị đọc sai ra sao. Cách khắc phục đúng là để API trả về các giá trị đó dưới dạng chuỗi, hoặc phía nhận dùng thư viện phân tích JSON hỗ trợ BigInt.
Đọc thông báo lỗi JSON và các lỗi hay gặp
Mỗi trình duyệt báo lỗi JSON.parse bằng câu chữ khác nhau, có trình duyệt không cho biết vị trí. Công cụ này tự quét cú pháp nên luôn báo số dòng, số cột bằng tiếng Việt. Các lỗi phổ biến nhất khi chép JSON từ code hoặc tài liệu: dấu phẩy thừa sau phần tử cuối cùng (trước ] hoặc }), dùng nháy đơn thay vì nháy kép, tên khóa không đặt trong nháy kép, có chú thích // hoặc /* */, có giá trị NaN, Infinity hay undefined vốn chỉ tồn tại trong JavaScript, chuỗi chứa ký tự xuống dòng thật chưa đổi thành \n, và số bắt đầu bằng chữ số 0 như 012. Ví dụ, với đoạn có dòng thứ ba là "b": [1, 2,], công cụ báo lỗi ở dòng 3, cột 14: dấu phẩy thừa ngay trước ].
Xem file JSON lớn mà trình duyệt không bị treo
Vẽ toàn bộ một mảng một trăm nghìn phần tử thành các dòng trên trang sẽ làm trình duyệt đứng hình. Công cụ dùng hai kỹ thuật: cuộn ảo, chỉ vẽ những dòng đang nằm trong khung nhìn; và phân trang từng mảng, mặc định hiện 100 phần tử đầu với nút Xem thêm 100 hoặc Xem tất cả. Nút Mở hết dừng lại sau 3.000 nhánh để tránh treo máy và thông báo rõ khi điều đó xảy ra. Khi tìm kiếm, công cụ tự nới phần đã hiện của các mảng cha để kết quả luôn có trên cây. File trên 1 triệu ký tự không tự phân tích khi gõ mà chờ bạn bấm nút, và file lớn nên mở bằng nút Mở file thay vì dán vào ô nhập.
Khóa trùng và thứ tự khóa: hai điểm dễ bị bỏ qua
Chuẩn JSON khuyến nghị tên khóa trong một object là duy nhất nhưng không cấm trùng. Khi gặp khóa trùng, JSON.parse của trình duyệt chỉ giữ giá trị xuất hiện sau cùng, giá trị trước biến mất mà không báo gì. Công cụ đếm và liệt kê các khóa trùng kèm số dòng để bạn kiểm tra nguồn dữ liệu. Điểm thứ hai: object trong JavaScript tự đưa các khóa dạng số nguyên (như "1", "2") lên trước các khóa chữ, nên thứ tự hiển thị trên cây có thể khác thứ tự trong văn bản gốc với những khóa này. Dữ liệu không đổi, chỉ thứ tự hiển thị khác.
Giới hạn của công cụ
Công cụ đọc JSON chuẩn theo RFC 8259; JSON5, JSONC có chú thích hay JSON Lines (mỗi dòng một object) sẽ bị báo lỗi, cần chuyển đổi trước. Dung lượng tối đa là 20 MB mỗi file; file lớn hơn nên xem bằng công cụ dòng lệnh như jq. Công cụ chỉ để xem, không sửa giá trị trực tiếp trên cây. Tìm kiếm dừng ở 5.000 kết quả đầu tiên. Giá trị số hiển thị và giá trị được sao chép là giá trị sau khi JavaScript đã đọc, nên số vượt giới hạn chính xác sẽ ở dạng đã làm tròn như cảnh báo mô tả.
Câu hỏi thường gặp (FAQ)
JSON Viewer khác gì JSON Formatter?
JSON Formatter định dạng lại văn bản (thụt lề, rút gọn, kiểm tra hợp lệ) để bạn đọc hoặc dán tiếp. JSON Viewer hiển thị dữ liệu dạng cây để khám phá cấu trúc: thu gọn, mở từng nhánh, tìm kiếm, lấy đường dẫn của một giá trị. Hai công cụ bổ trợ nhau.
Dữ liệu JSON của tôi có bị gửi lên máy chủ không?
Không. Việc đọc file, phân tích và hiển thị cây đều chạy bằng JavaScript trong trình duyệt của bạn. Bạn có thể ngắt mạng sau khi tải trang và công cụ vẫn hoạt động.
Công cụ xem được file JSON lớn đến đâu?
Tối đa 20 MB mỗi file. Nhờ cuộn ảo và chỉ hiện 100 phần tử đầu của mỗi mảng, cây vẫn cuộn mượt với file vài chục MB trên máy tính thông thường. Máy cấu hình yếu hoặc điện thoại có thể chậm hơn khi phân tích file gần giới hạn.
Làm sao lấy đường dẫn của một giá trị trong JSON?
Bấm vào dòng chứa giá trị trên cây. Khung bên phải hiện JSONPath (ví dụ $.nhanVien[0].hoTen) và đường dẫn JavaScript (data.nhanVien[0].hoTen), mỗi dòng có nút Chép.
Vì sao ID trong JSON hiện sai vài chữ số cuối?
Vì JavaScript chỉ biểu diễn chính xác số nguyên đến 9.007.199.254.740.991. Số lớn hơn bị làm tròn, ví dụ 9007199254740993 thành 9007199254740992. Công cụ liệt kê các số như vậy trong khối cảnh báo. Cách xử lý đúng là để API trả các ID này dưới dạng chuỗi.
Công cụ báo lỗi ở dòng và cột nào có đáng tin không?
Có. Công cụ tự quét cú pháp theo chuẩn JSON thay vì dựa vào thông báo của trình duyệt, nên vị trí là ký tự đầu tiên làm JSON không hợp lệ. Lưu ý cột được đếm theo đơn vị ký tự của JavaScript, emoji chiếm hai đơn vị.
Tìm kiếm có phân biệt chữ hoa, chữ thường và dấu tiếng Việt không?
Không phân biệt chữ hoa thường, nhưng có phân biệt dấu: tìm "nguyen" sẽ không khớp "Nguyễn". Công cụ chuẩn hóa Unicode về dạng NFC nên chữ có dấu gõ theo kiểu tổ hợp vẫn khớp với chữ dựng sẵn.
Tôi có thể dán JSON có chú thích hoặc dấu phẩy cuối không?
Không, đó là JSON5 hoặc JSONC chứ không phải JSON chuẩn. Công cụ sẽ báo đúng dòng có chú thích hay dấu phẩy thừa để bạn xóa, hoặc bạn dùng JSON5 Converter để chuyển trước.
Nút Mở hết có mở toàn bộ mọi nhánh không?
Với dữ liệu thông thường là có. Với file rất lớn, công cụ dừng sau 3.000 nhánh và hiện thông báo để trình duyệt không bị treo; bạn mở tiếp các nhánh cần xem bằng tay hoặc dùng tìm kiếm.
Có dùng được bàn phím để duyệt cây không?
Có. Bấm vào vùng cây rồi dùng mũi tên lên, xuống để chuyển dòng, mũi tên phải để mở nhánh, mũi tên trái để thu gọn hoặc về node cha, Enter hoặc phím cách để bật tắt. Trong ô tìm kiếm, Enter đi tới kết quả sau, Shift + Enter về kết quả trước.
Công cụ có sửa được giá trị trong JSON không?
Không, đây là công cụ xem. Bạn sửa trong ô nhập văn bản rồi xem lại cây. Muốn chuyển JSON sang CSV, SQL hay định dạng khác, hãy dùng JSON Converter.
JSON Lines (mỗi dòng một object) có xem được không?
Không trực tiếp, vì cả file không phải một giá trị JSON duy nhất. Bạn có thể bọc các dòng trong dấu [ ] và thêm dấu phẩy giữa các dòng để thành một mảng, rồi dán vào.
Vì sao thứ tự một số khóa trên cây khác với văn bản gốc?
Object trong JavaScript luôn đưa khóa dạng số nguyên như "1", "2" lên trước các khóa chữ. Dữ liệu không thay đổi, chỉ thứ tự hiển thị của các khóa dạng số khác đi.
Từ khóa liên quan
- json viewer
- json viewer online
- xem json dạng cây
- json tree viewer
- xem file json online
- đọc file json
- json explorer
- mở file json lớn
- json path online
- lấy jsonpath
- copy json path
- tìm kiếm trong json
- kiểm tra lỗi json
- json parse error line column
- json big number precision
- số lớn json javascript
- json duplicate keys
- xem response api json
- json collapsible tree
- công cụ json cho lập trình viên
