Xem Cấu Trúc Cây JSON

Xem Cấu Trúc Cây JSON - Công Cụ Khám Phá & Trực Quan Hóa JSON

Công cụ xem cấu trúc cây JSON mạnh mẽ giúp bạn trực quan hóa, khám phá và hiểu rõ cấu trúc dữ liệu JSON phức tạp. Có giao diện cây tương tác có thể thu gọn, tô sáng cú pháp, tìm kiếm theo thời gian thực, sao chép đường dẫn, chế độ toàn màn hình và nhiều tùy chọn hiển thị. Hoàn hảo cho lập trình viên, người kiểm thử API, nhà phân tích dữ liệu.

Tại sao JSON của tôi không hợp lệ dù nhìn có vẻ đúng?

Thủ phạm phổ biến nhất là dấu phẩy thừa ở cuối, khóa không có ngoặc kép, ngoặc đơn và chú thích lạc — đều hợp lệ trong JavaScript nhưng bị cấm bởi đặc tả JSON (RFC 8259). JSON nghiêm ngặt yêu cầu khóa và chuỗi nằm trong ngoặc kép, không có dấu phẩy sau phần tử cuối cùng của mảng hoặc đối tượng, và không có bất kỳ chú thích nào. Các lỗi thường gặp khác bao gồm dấu gạch ngược không được thoát trong chuỗi (viết \\ để có một dấu gạch ngược), ký tự điều khiển không thoát như xuống dòng trực tiếp, và sao chép “dấu ngoặc thông minh” (“”) từ trình soạn thảo thay vì dấu ngoặc thẳng (""). Trình xem này hiển thị lỗi phân tích đầu tiên cùng số dòng và cột chính xác để bạn nhảy thẳng đến ký tự gây lỗi. Nếu cần xử lý đầu vào không nghiêm ngặt từ file cấu hình, hãy dán nó vào trình chuyển đổi JSON5 trước, sau đó đưa kết quả sạch vào trình xem cây này.

Sự khác biệt giữa đối tượng và mảng JSON trong chế độ cây là gì?

JSON có hai loại container và trình xem đánh dấu chúng khác nhau. Đối tượng là tập hợp không theo thứ tự của các thành viên có tên và hiển thị dưới dạng {} với các cặp khóa:giá trị; trình xem hiển thị tên khóa bằng màu khác biệt và đặc tả không bảo đảm thứ tự khóa. Mảng là chuỗi có thứ tự và hiển thị dưới dạng [] với các chỉ số số học 0, 1, 2…; thứ tự có ý nghĩa và phải được bảo toàn. Bên trong cả hai bạn có thể lồng bất kỳ loại giá trị nào: chuỗi, số, boolean, null, đối tượng khác hoặc mảng khác. Dùng đối tượng khi mỗi phần tử có định danh ổn định, và mảng khi các mục có thể hoán đổi hoặc có thứ tự. Kết hợp hai loại là bình thường: mảng đối tượng là hình dạng chuẩn cho dữ liệu dạng bảng, còn đối tượng có giá trị là mảng là hình dạng chuẩn cho dữ liệu nhóm.

Làm cách nào mở rộng hoặc thu gọn tất cả các nhánh cùng lúc?

Sử dụng nút Mở Rộng Tất Cả và Thu Gọn Tất Cả ở đầu cây. Mở Rộng Tất Cả mở đệ quy mọi đối tượng và mảng đến giá trị lá — hữu ích khi bạn muốn quét toàn bộ tài liệu hoặc đưa vào trình đọc màn hình. Thu Gọn Tất Cả chỉ hiển thị các khóa cấp cao nhất, quét nhanh hơn nhiều trên payload lớn. Để mở một nhánh đơn mà không hiển thị con của nó, hãy nhấp trực tiếp vào tam giác bên cạnh nhánh đó; giữ Alt (hoặc Option trên macOS) và nhấp để chuyển đổi nhánh đó cùng với tất cả phần tử con. Trạng thái mở rộng được bảo lưu khi bạn tìm kiếm, nên kết quả bên trong một nhánh đã thu gọn sẽ tự động mở đúng đường dẫn cần thiết để hiện thị.

Trình xem có xử lý BOM UTF-8 và các vấn đề mã hóa ký tự khác không?

Có. Bộ phân tích loại bỏ dấu thứ tự byte UTF-8 ở đầu (các byte EF BB BF, thường được công cụ Windows và một số bản xuất Java thêm vào) trước khi phân tích, nên file có BOM sẽ không gây lỗi cú pháp ở đây. Bản thân JSON theo RFC 8259 phải được mã hóa bằng UTF-8, UTF-16 hoặc UTF-32, với UTF-8 được khuyến nghị mạnh mẽ cho trao đổi. Nếu bạn dán văn bản UTF-16 từ clipboard, trình duyệt đã giải mã nó rồi nên hiếm khi bạn phải lo lắng. Trình xem cũng hiển thị đúng các chuỗi thoát: \u00e9 hiển thị thành é, cặp surrogate như \uD83D\uDE00 hiển thị thành một emoji 😀, và \n hiển thị dưới dạng ký tự xuống dòng bên trong chuỗi thay vì phá vỡ bố cục.

Các chuỗi thoát như \u00e9, \n, \t và \/ thực sự có ý nghĩa gì?

Đây là sáu chuỗi thoát chuỗi được JSON định nghĩa. \" chèn dấu ngoặc kép, \\ chèn dấu gạch ngược, \/ chèn dấu gạch chéo (hợp lệ nhưng không bắt buộc — dấu gạch chéo không bao giờ cần thoát để phân tích, chỉ cần để nhúng JSON trong thẻ <script> HTML), \b \f \n \r \t chèn các ký tự điều khiển ASCII lùi, ngắt trang, xuống dòng, xuống đầu dòng và tab, còn \uXXXX chèn điểm mã Unicode với giá trị hex XXXX. Đối với điểm mã trên U+FFFF, JSON sử dụng cặp surrogate UTF-16: \uD83D\uDE00 mã hóa emoji mặt cười U+1F600. Bất kỳ escape nào khác (ví dụ \x41 hoặc \0) là lỗi cú pháp trong JSON nghiêm ngặt, mặc dù nhiều ngôn ngữ chấp nhận chúng trong literal riêng.

Làm sao truy vấn một giá trị lồng sâu bằng JSONPath hoặc biểu thức tương tự?

JSONPath ($ là root, .key là con, [n] là chỉ số mảng, .. là đi xuống đệ quy, [?(@.field=='x')] là bộ lọc) và JMESPath (một superset nghiêm ngặt hơn với multiselect list và projection) là hai ngôn ngữ truy vấn thống trị cho JSON. Chúng cho phép viết biểu thức như $.store.book[?(@.price < 10)].title để trích xuất tiêu đề của mỗi cuốn sách dưới 10 đô la mà không phải viết mã kiểu mệnh lệnh. Trình xem cây này tập trung vào duyệt hơn là truy vấn, nên để đánh giá một biểu thức JSONPath, mở công cụ chuyên dụng JSON Path Finder, dán cùng tài liệu đó và gõ biểu thức. Để dùng theo chương trình, có thư viện trong mọi ngôn ngữ chính: jsonpath-plus và JMESPath.js trong JavaScript, jsonpath-ng và jmespath trong Python, và hàm JSON_TABLE tích hợp trong các engine SQL hiện đại.

File JSON lớn nhất tôi có thể dán mà không đóng băng trình duyệt là bao nhiêu?

Trình duyệt thường có thể phân tích JSON đến khoảng 50 MB trên máy để bàn, nhưng điều thực sự làm đóng băng UI là việc vẽ cây với hàng triệu nodes. Theo quy tắc ngón tay cái, hãy lên kế hoạch dưới 5 MB hoặc dưới 100 000 giá trị lá để có trải nghiệm tương tác mượt mà; vượt quá đó trình xem sử dụng render ảo hóa và chỉ vẽ các node hiển thị. Đối với file lớn hơn 100 MB, bạn nên stream dữ liệu bằng bộ phân tích kiểu SAX thay vì tải toàn bộ tài liệu vào bộ nhớ: ijson trong Python, JSONStream trong Node, hoặc Jackson Streaming API trong Java cho phép bạn duyệt tài liệu từng sự kiện một và xử lý bản ghi khi chúng đến. Đối với tập dữ liệu thực sự khổng lồ, hãy chuyển định dạng lưu trữ sang NDJSON (một giá trị JSON mỗi dòng) hoặc Parquet để đọc và lọc mà không bao giờ phải vật chất hóa toàn bộ tài liệu.

Tại sao các số lớn như 9007199254740993 hiển thị sai?

JSON cho phép bất kỳ số thập phân nào với độ chính xác tùy ý, nhưng JavaScript phân tích mỗi số thành một double IEEE 754 64-bit, chỉ có thể biểu diễn số nguyên chính xác đến 2^53 − 1 = 9 007 199 254 740 991 (giá trị của Number.MAX_SAFE_INTEGER). Các giá trị lớn hơn sẽ tự động làm tròn về double gần nhất biểu diễn được, nên 9007199254740993 trở thành 9007199254740992. Điều này ảnh hưởng đến bất kỳ ai dùng JSON để truyền ID cơ sở dữ liệu, ID snowflake của Twitter, giá trị blockchain hoặc dấu thời gian nanosát. Giải pháp tiêu chuẩn là đặt số lớn trong ngoặc kép như chuỗi ("id": "9007199254740993") và phân tích chúng bằng BigInt hoặc thư viện decimal ở bên nhận. JSON5 và một số bộ phân tích streaming cung cấp tùy chọn “dùng BigInt cho số nguyên ngoài phạm vi an toàn”, nhưng JSON.parse của trình duyệt thông thường không, nên luôn kiểm tra xem bên sản xuất có đặt số nguyên lớn trong ngoặc kép trước khi tin vào so sánh bằng.

Tính Năng Chính

• Cấu trúc cây có thể thu gọn tương tác để điều hướng dễ dàng
• Tô sáng cú pháp với các kiểu dữ liệu được mã hóa màu
• Mở rộng tất cả / thu gọn tất cả cho thao tác hàng loạt
• Mở rộng đến các cấp cụ thể (1, 2, 3 hoặc tất cả)
• Tìm kiếm theo thời gian thực để tìm khóa và giá trị
• Sao chép đường dẫn JSON đến bất kỳ nút nào (ký hiệu chấm)
• Sao chép từng giá trị vào clipboard
• Hiển thị/ẩn kiểu dữ liệu để xem rõ hơn
• Hiển thị/ẩn chỉ số mảng
• Chế độ toàn màn hình cho cấu trúc JSON lớn
• Hỗ trợ chế độ tối với nút chuyển giao diện
• Định dạng JSON đã nén hoặc chưa định dạng
• Tải JSON mẫu để thử nghiệm
• Xử lý các đối tượng và mảng lồng sâu
• Chỉ báo trực quan cho đối tượng, mảng và kiểu nguyên thủy
• Thiết kế responsive cho di động và máy tính
• 100% phía client - dữ liệu không bao giờ rời khỏi trình duyệt
• Hoạt động ngoại tuyến sau khi tải ban đầu
• Không giới hạn kích thước tệp
• Hiển thị nhanh ngay cả với tệp JSON lớn