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.

Переглядач таблиці JSON

5 рядків

8 стовпчиків

Вхідні дані 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
  }
]

Таблиця (5 рядків, 8 стовпчики)

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

Технічні деталі

Як працює конвертер JSON у таблицю

Що робить інструмент

Конвертер JSON у таблицю відображає JSON-масив об’єктів як сортувальну та фільтровану HTML-таблицю. Він автоматично витягує заголовки стовпців із ключів об’єктів, сплющує вкладені об’єкти в стовпці з крапковою нотацією та показує дані у знайомому вигляді, схожому на електронну таблицю. Це полегшує візуальний перегляд, сортування та пошук структурованих JSON-даних без імпорту в базу даних або застосунок електронних таблиць.

Поширені сценарії використання для розробників

Розробники використовують цей інструмент, щоб швидко візуалізувати масиви відповідей API, переглядати результати запитів до бази даних, експортовані як JSON, або аналізувати конфігураційні дані. Він особливо корисний для перегляду великих масивів, повернених REST-ендпойнтами, порівняння записів поруч і виявлення відсутніх або аномальних значень у наборах даних. QA-інженери застосовують його, щоб перевірити, що масові експорти даних містять очікувані поля та значення без написання скриптів.

Формати даних, типи або варіанти

Інструмент очікує JSON-масив об’єктів, де кожен об’єкт представляє рядок. Об’єкти з неоднорідними ключами обробляються шляхом створення стовпців для всіх унікальних ключів у всіх рядках, із порожніми клітинками там, де ключ відсутній. Вкладені об’єкти сплющуються за допомогою крапкової нотації (наприклад, address.city стає заголовком стовпця). Масиви у значеннях відображаються як рядки, розділені комами. Примітивні масиви без елементів-об’єктів не підтримуються як вхідні дані для таблиці.

Поширені помилки та крайові випадки

Дуже глибоко вкладені об’єкти дають заголовки стовпців, які після сплющення стають довгими й важкими для читання. Масиви зі змішаними типами (деякі елементи — об’єкти, інші — примітиви) можуть призводити до несподіваних макетів стовпців. Великі набори даних із тисячами рядків можуть уповільнювати рендеринг у браузері — у таких випадках варто розбити дані на сторінки перед вставленням. Об’єкти з ключами, що відрізняються лише регістром (наприклад, 'Name' проти 'name'), створять окремі стовпці, що може збивати користувачів з пантелику.

Коли використовувати цей інструмент, а коли — код

Використовуйте цей браузерний інструмент для швидкого візуального огляду JSON-масивів під час розробки та налагодження. Для програмного рендерингу таблиць у застосунках використовуйте бібліотеки на кшталт ag-Grid, TanStack Table або відображення pandas DataFrame. Для масштабного дослідження даних інструменти на кшталт DuckDB або jq у поєднанні з утилітами форматування стовпців обробляють мільйони записів, що було б непрактично у вкладці браузера.