What JSON input does the JSON Table Viewer accept?

The tool accepts a JSON array of objects. Each element in the array becomes a table row, and the keys of the objects become column headers. Nested objects are automatically flattened using dot notation — for example, { "address": { "city": "London" } } produces a column named "address.city". Arrays inside objects are displayed as their JSON string representation.

How are columns determined when objects have different keys?

Columns are the union of all keys found across every object in the array. If a row is missing a key that other rows have, the corresponding cell is left empty. This means you can safely mix records with slightly different shapes and still get a complete, readable table.

How does the sort feature work?

Click any column header to sort the table by that column in ascending order. Click the same header again to switch to descending order. Sorting is purely client-side and never modifies your original JSON. A chevron icon next to the active column header shows the current sort direction.

How do I copy the table as CSV?

Click the "Copy as CSV" button below the table. It serialises the current sorted view — including the header row — to CSV format and copies it to your clipboard. You can then paste it directly into Excel, Google Sheets, or any text editor.

Trình xem bảng JSON

5 hàng

8 cột

Đầu vào JSON

[
  {
    "id": 1,
    "name": "Alice Johnson",
    "email": "alice@example.com",
    "role": "admin",
    "address": {
      "city": "New York",
      "country": "US"
    },
    "age": 32,
    "active": true
  },
  {
    "id": 2,
    "name": "Bob Smith",
    "email": "bob@example.com",
    "role": "editor",
    "address": {
      "city": "London",
      "country": "GB"
    },
    "age": 28,
    "active": true
  },
  {
    "id": 3,
    "name": "Carol White",
    "email": "carol@example.com",
    "role": "viewer",
    "address": {
      "city": "Paris",
      "country": "FR"
    },
    "age": 35,
    "active": false
  },
  {
    "id": 4,
    "name": "David Lee",
    "email": "david@example.com",
    "role": "editor",
    "address": {
      "city": "Tokyo",
      "country": "JP"
    },
    "age": 41,
    "active": true
  },
  {
    "id": 5,
    "name": "Eva Martinez",
    "email": "eva@example.com",
    "role": "admin",
    "address": {
      "city": "Berlin",
      "country": "DE"
    },
    "age": 29,
    "active": false
  }
]

Bảng (5 hàng, 8 cột)

id	name	email	role	address.city	address.country	age	active
1	Alice Johnson	alice@example.com	admin	New York	US	32	true
2	Bob Smith	bob@example.com	editor	London	GB	28	true
3	Carol White	carol@example.com	viewer	Paris	FR	35	false
4	David Lee	david@example.com	editor	Tokyo	JP	41	true
5	Eva Martinez	eva@example.com	admin	Berlin	DE	29	false

Chi tiết kỹ thuật

Cách Trình chuyển đổi JSON sang Bảng hoạt động

Công cụ làm gì

Trình chuyển đổi JSON sang Bảng hiển thị một mảng JSON gồm các đối tượng dưới dạng bảng HTML có thể sắp xếp và lọc. Công cụ tự động trích xuất tiêu đề cột từ các khóa của đối tượng, làm phẳng các đối tượng lồng nhau thành các cột theo ký pháp dấu chấm, và trình bày dữ liệu theo giao diện quen thuộc như bảng tính. Nhờ đó, bạn có thể dễ dàng quét, sắp xếp và tìm kiếm dữ liệu JSON có cấu trúc mà không cần nhập vào cơ sở dữ liệu hay ứng dụng bảng tính.

Các trường hợp sử dụng phổ biến cho lập trình viên

Nhà phát triển dùng công cụ này để nhanh chóng trực quan hóa các mảng phản hồi API, kiểm tra kết quả truy vấn cơ sở dữ liệu được xuất dưới dạng JSON, hoặc xem lại dữ liệu cấu hình. Công cụ đặc biệt hữu ích để rà soát các mảng lớn trả về từ các endpoint REST, so sánh bản ghi cạnh nhau và phát hiện các giá trị thiếu hoặc bất thường trong bộ dữ liệu. Kỹ sư QA dùng nó để xác minh rằng các bản xuất dữ liệu hàng loạt chứa đúng các trường và giá trị mong đợi mà không cần viết script.

Định dạng dữ liệu, kiểu hoặc biến thể

Công cụ mong đợi một mảng JSON gồm các đối tượng, trong đó mỗi đối tượng đại diện cho một hàng. Các đối tượng có tập khóa không đồng nhất sẽ được xử lý bằng cách tạo cột cho tất cả các khóa duy nhất trên mọi hàng, với ô trống ở nơi khóa không tồn tại. Các đối tượng lồng nhau được làm phẳng bằng ký pháp dấu chấm (ví dụ: address.city trở thành tiêu đề cột). Các mảng trong giá trị được hiển thị dưới dạng chuỗi phân tách bằng dấu phẩy. Các mảng nguyên thủy không có phần tử đối tượng không được hỗ trợ làm đầu vào bảng.

Các lỗi thường gặp và trường hợp biên

Các đối tượng lồng quá sâu sẽ tạo ra tiêu đề cột dài và khó đọc khi được làm phẳng. Các mảng chứa kiểu dữ liệu trộn lẫn (một số phần tử là đối tượng, số khác là kiểu nguyên thủy) có thể tạo ra bố cục cột không như mong đợi. Các bộ dữ liệu lớn với hàng nghìn hàng có thể làm chậm việc render trên trình duyệt — trong các trường hợp đó, hãy cân nhắc phân trang dữ liệu trước khi dán. Các đối tượng có khóa chỉ khác nhau ở chữ hoa/thường (ví dụ: 'Name' so với 'name') sẽ tạo các cột riêng, có thể gây nhầm lẫn cho người dùng.

Khi nào nên dùng công cụ này thay vì viết mã

Dùng công cụ trên trình duyệt này để kiểm tra trực quan nhanh các mảng JSON trong quá trình phát triển và gỡ lỗi. Để render bảng theo cách lập trình trong ứng dụng, hãy dùng các thư viện như ag-Grid, TanStack Table hoặc hiển thị pandas DataFrame. Với việc khám phá dữ liệu quy mô lớn, các công cụ như DuckDB hoặc jq kết hợp với tiện ích định dạng theo cột có thể xử lý hàng triệu bản ghi — điều không thực tế trong một tab trình duyệt.