JSON Path Finder Online - Tìm Đường Dẫn Trong JSON
JSON Path Finder giúp phân tích cấu trúc JSON và liệt kê đường dẫn đến từng giá trị trong object hoặc array lồng nhau. Bạn có thể dán API response, tìm nhanh theo key/value, xem kiểu dữ liệu và copy path để dùng khi debug, mapping dữ liệu hoặc viết selector trong code. Công cụ hữu ích khi làm việc với JSON lớn, nested object hoặc response từ REST/GraphQL API.
Tính năng nổi bật
- Phân tích JSON tự động, liệt kê tất cả paths
- Hiển thị giá trị và kiểu dữ liệu (string, number, object, array)
- Tìm kiếm nhanh theo path hoặc value
- Copy path với một click
- Hỗ trợ nested objects và arrays sâu
- Hiển thị array index trong path: [0], [1]...
- Color coding theo kiểu dữ liệu
- Xử lý JSON lớn (khuyến nghị < 1MB)
- Báo lỗi rõ ràng nếu JSON không hợp lệ
- Bảo mật - dữ liệu không rời browser
Tại Sao Cần JSON Path Finder?
Khi làm việc với API, bạn thường nhận được JSON response phức tạp với nhiều nested levels. Tìm đường dẫn đến giá trị cần thiết bằng tay rất mất thời gian và dễ sai. Ví dụ: response.data.users[0].profile.address.city - viết sai một chữ là undefined. JSON Path Finder giúp bạn: visualize cấu trúc JSON dễ hiểu, tìm nhanh path đến bất kỳ giá trị nào, copy path chính xác để dùng trong code, và hiểu rõ data structure của API. Đặc biệt hữu ích khi integrate API mới hoặc debug data issues.
Lợi ích khi sử dụng
- Tìm path trong vài giây thay vì vài phút
- Không sai sót khi copy path
- Hiểu cấu trúc JSON phức tạp dễ dàng
- Debug API response nhanh chóng
- Tiết kiệm thời gian development
- Làm việc với JSON lớn không overwhelm
- Bảo mật cho dữ liệu API nhạy cảm
- Không cần cài đặt tool
Hướng Dẫn Sử Dụng JSON Path Finder
- 1Paste JSON vào ô input bên trái
- 2Nhấn 'Phân tích JSON' để bắt đầu
- 3Xem danh sách tất cả paths bên phải
- 4Sử dụng ô tìm kiếm để filter theo path hoặc value
- 5Hover vào path để xem nút Copy
- 6Click Copy để lấy path, paste vào code
Hiểu JSON Path Format
Object property: user.name, user.profile.email. Array index: users[0], orders[1].items[0]. Nested: data.users[0].profile.address.city. Root: $ đại diện cho root object. Công cụ sử dụng dot notation chuẩn JavaScript, có thể paste trực tiếp vào code: const city = response.data.users[0].profile.address.city.
Các Trường Hợp Sử Dụng
API Integration: Tìm path đến data cần thiết trong response. Data Extraction: Xác định paths để extract với jq hoặc JSONPath. Debugging: Kiểm tra data có đúng structure không. Documentation: Liệt kê tất cả fields trong API response. Testing: Verify response structure trong automated tests.
JSONPath và Dot Notation khác nhau thế nào?
JSONPath là một ngôn ngữ query đầy đủ cho JSON, dùng cú pháp như $.store.book[*].author hoặc $..price để lấy nhiều giá trị cùng lúc (wildcard, filter, recursive descent). Công cụ này không implement JSONPath query engine mà tạo ra dot notation - định dạng path chuẩn của JavaScript như data.users[0].profile.email, có thể paste thẳng vào code để đọc giá trị. Ưu điểm của dot notation là dùng được ngay trong bất kỳ đoạn JS/TS nào mà không cần thêm thư viện JSONPath, còn nhược điểm là mỗi path chỉ trỏ đến đúng một giá trị cụ thể chứ không match nhiều node như JSONPath wildcard. Nếu bạn cần query phức tạp kiểu $.orders[?(@.total>100)], vẫn nên dùng thư viện JSONPath riêng; còn khi chỉ cần biết 'giá trị này nằm ở đâu trong response' để viết code truy cập, dot notation từ công cụ này là đủ và trực quan hơn.
Xử Lý Nested Object Và Array Lồng Nhau
Hàm phân tích của công cụ hoạt động theo đệ quy: với object, nó duyệt qua từng key và nối thêm .key vào path hiện tại; với array, nó duyệt từng phần tử và nối thêm [index]; với giá trị nguyên thủy (string, number, boolean, null), nó dừng đệ quy và ghi nhận path kèm giá trị, kiểu dữ liệu. Nhờ vậy, JSON lồng nhiều cấp - ví dụ mảng object chứa mảng object khác như user.orders[0].items[2].sku - vẫn được liệt kê đầy đủ từng path trung gian (object cha, phần tử mảng) lẫn path lá (giá trị cuối cùng). Đây là cách tiếp cận đã hoạt động đúng với mọi độ sâu lồng nhau, không giới hạn số cấp, chỉ giới hạn bởi bộ nhớ trình duyệt khi JSON quá lớn.
Bảo Mật: Dữ Liệu Không Rời Khỏi Trình Duyệt
Toàn bộ quá trình - từ JSON.parse cho tới đệ quy liệt kê path - chạy bằng JavaScript ngay trên trình duyệt của bạn, không có request nào được gửi tới server của Tấn Phát Digital hay bất kỳ server thứ ba nào để xử lý nội dung JSON. Điều này khác với các dịch vụ online yêu cầu upload file hoặc gọi API để phân tích dữ liệu. Vì vậy bạn có thể dán API response chứa thông tin nội bộ, cấu trúc dữ liệu sản phẩm hoặc response test mà không lo bị lưu lại ở đâu đó ngoài máy mình. Tuy vậy, để an toàn tối đa, vẫn nên tránh dán trực tiếp các giá trị nhạy cảm thật như mật khẩu, token sống hoặc dữ liệu cá nhân khách hàng thật - hãy thay bằng dữ liệu mẫu có cùng cấu trúc khi chỉ cần kiểm tra path.
Câu hỏi thường gặp (FAQ)
Có hỗ trợ JSON lớn không?
Có, nhưng với JSON rất lớn (> 1MB hoặc > 10,000 paths), performance có thể chậm. Khuyến nghị: nếu chỉ cần một phần của JSON, hãy copy phần đó thay vì toàn bộ. Tool xử lý trên browser nên phụ thuộc vào RAM của máy bạn.
Path có dùng được trong JavaScript không?
Có! Path format là dot notation chuẩn JavaScript. Ví dụ: const value = data.users[0].name. Với path có special characters trong key, cần dùng bracket notation: data['special-key'].
Tại sao báo 'JSON không hợp lệ'?
Các lỗi phổ biến: 1) Thiếu dấu ngoặc kép quanh keys (JSON yêu cầu "key" không phải key), 2) Trailing comma sau phần tử cuối, 3) Single quotes thay vì double quotes, 4) Comments trong JSON (không được phép). Thử validate JSON trước với JSON validator.
Có hỗ trợ JSONPath query không?
Hiện tại tool chỉ hiển thị paths, không hỗ trợ JSONPath query syntax như $.store.book[*].author. Tuy nhiên, bạn có thể tìm kiếm để filter paths và copy path cần thiết.
Dữ liệu có được gửi lên server không?
Không! Toàn bộ quá trình phân tích diễn ra trên browser của bạn. JSON không được upload lên bất kỳ server nào, đảm bảo an toàn cho dữ liệu API nhạy cảm hoặc thông tin bảo mật.
Object rỗng {} và array rỗng [] hiển thị path thế nào?
Object rỗng và array rỗng vẫn được liệt kê một dòng path với value tương ứng ('Object' hoặc 'Array[0]') nhưng không có path con nào bên dưới vì không có key hay phần tử nào để đệ quy tiếp. Đây là dấu hiệu hữu ích để phát hiện field nào trong response đang trống, ví dụ orders: [] nghĩa là user chưa có đơn hàng nào.
Nếu key JSON chứa dấu cách hoặc ký tự đặc biệt thì path hiển thị ra sao?
Công cụ vẫn nối key gốc bằng dấu chấm, ví dụ data.user name.value, nhưng path dạng này không chạy được trực tiếp trong JavaScript vì tên thuộc tính có khoảng trắng. Khi copy path loại này vào code, bạn cần chuyển sang bracket notation với dấu ngoặc kép: data['user name']['value'].
Root của JSON là array thì path bắt đầu như thế nào?
Nếu JSON gốc là một mảng, ví dụ [{"id":1},{"id":2}], path của từng phần tử sẽ là [0], [1]... còn path của field bên trong là [0].id, [1].id. Path rỗng (root) được hiển thị là $ để bạn dễ nhận ra đây là toàn bộ cấu trúc gốc.
Công cụ có phân biệt được number và string trông giống nhau không?
Có. Kiểu dữ liệu hiển thị dựa trên typeof thực tế sau khi JSON.parse, nên "total": 100 sẽ nhận type number còn "total": "100" nhận type string, kể cả khi hai giá trị trông giống hệt nhau khi đọc bằng mắt. Đây là điểm hữu ích để phát hiện lỗi API trả sai kiểu dữ liệu (ví dụ số bị bọc thành string).
So với việc console.log toàn bộ object trong DevTools thì công cụ này khác gì?
console.log cũng cho xem cấu trúc nhưng bạn phải tự click mở từng cấp và tự ghép path bằng tay. Công cụ này liệt kê sẵn path đầy đủ của mọi giá trị lá cùng lúc và cho tìm kiếm theo path hoặc value, nên phù hợp khi cần tìm nhanh một field cụ thể nằm sâu trong response lớn mà không muốn dò tay từng cấp.
Có cần validate JSON schema trước khi dùng công cụ không?
Không bắt buộc. Công cụ chỉ cần JSON hợp lệ về cú pháp (parse được bằng JSON.parse) để liệt kê path, không kiểm tra JSON có đúng schema mong đợi hay không. Việc kiểm tra dữ liệu có đúng kiểu, đúng field bắt buộc theo schema vẫn cần công cụ validate schema riêng.
Kết quả có giữ đúng thứ tự key như trong JSON gốc không?
Có, thứ tự path hiển thị theo đúng thứ tự Object.keys() trả về, mà với JSON thông thường sẽ giữ nguyên thứ tự khai báo trong chuỗi gốc. Điều này giúp bạn đối chiếu path với vị trí thực tế của field trong response mà không bị đảo lộn.
Từ khóa liên quan
- JSON path finder
- tìm đường dẫn JSON
- JSON parser
- JSON analyzer
- JSON path extractor
- parse JSON online
- JSON viewer
- JSON explorer
- API response parser
- nested JSON
- JSONPath online
- dot notation JSON
- trích xuất dữ liệu JSON
- JSON key path
- duyệt JSON lồng nhau
- JSON debug tool
- REST API JSON path
- GraphQL response path