IT Market
Инструменты/Код/Документы/JSON в HTML таблицу онлайн — конвертер бесплатно
JSON → TABLE

Конвертируйте JSON в HTML таблицу

Коротко об инструменте

JSON в HTML-таблицу

Ответ API длиной в двести строк глазами не читается. Вставьте массив объектов — и страница нарисует таблицу, где каждый ключ стал столбцом, а каждый элемент массива — строкой; сравнить значения по колонке становится делом одного взгляда. Кнопка тут одна, «Построить таблицу», а результат — не текст в поле, а готовая таблица под областью ввода. Всё считается в браузере, поэтому чужую выгрузку можно посмотреть, никуда её не выкладывая. Смотрите также: выгрузить готовую HTML-таблицу в CSV, сохранить те же данные таблицей для Excel, починить JSON, если массив не разбирается, превратить результат SQL-запроса в JSON.

Как пользоваться

  1. Вставьте в поле «JSON на входе» массив объектов в квадратных скобках — одиночный объект таблицы не образует.
  2. Убедитесь, что у элементов совпадает набор ключей: шапка столбцов строится по первому объекту массива.
  3. Нажмите «Построить таблицу» — таблица отрисуется на странице сразу под полем ввода.
  4. Читайте результат прямо на странице: кнопки копирования тут нет, таблицу переносят выделением мышью.
  5. Чтобы посмотреть другую выгрузку, замените текст в поле и нажмите «Построить таблицу» ещё раз.

Вопросы и ответы

Почему у части строк ячейки пустые или столбца не хватает?

Шапка таблицы собирается по первому элементу массива. Если во втором объекте появился ключ, которого в первом не было, отдельного столбца под него не возникнет, а если ключа наоборот не хватает — ячейка останется пустой. Выгрузки с плавающим набором полей полезно сначала привести к единому виду: так вы заодно увидите, где бэкенд не отдаёт поле.

Что произойдёт с вложенным объектом внутри элемента?

В ячейку помещается значение как есть, поэтому вложенный объект или массив читаемой строкой не станет — вместо данных вы увидите служебное представление. Таблица хороша для плоских записей. Разложите вложенность в отдельные ключи верхнего уровня до конвертации либо посмотрите структуру целиком в JSON Formatter + Validator, где видно дерево.

Можно ли перенести таблицу в Excel или Google Таблицы?

Да, но не кнопкой: выделите отрисованную таблицу мышью, скопируйте и вставьте в лист — редакторы разбирают HTML-таблицу из буфера по ячейкам. Если нужен файл, а не буфер обмена, возьмите соседний инструмент «JSON в CSV»: он отдаёт текст, который Excel и Google Таблицы открывают напрямую.

Сколько записей выдержит страница?

Ограничение задаёт не сервер, а память вкладки: сотни строк рисуются мгновенно, тысячи начинают заметно тормозить прокрутку, потому что каждая ячейка — отдельный элемент разметки. Для больших выгрузок разумно вставить первые двести элементов, чтобы разглядеть структуру, а полный объём обрабатывать скриптом или в редакторе таблиц.

Как посмотреть JSON, у которого на верхнем уровне объект, а не массив?

Найдите внутри него массив с записями — обычно он лежит под ключом data, items или results — и вставьте только его вместе с квадратными скобками. Объект верхнего уровня описывает ответ целиком: в нём соседствуют счётчики, курсоры пагинации и сами данные, и строить из этого таблицу бессмысленно.

Видит ли кто-нибудь вставленную выгрузку?

Таблицу строит скрипт открытой вкладки, и содержимое поля никуда не передаётся: страница не делает сетевых запросов с вашим текстом. При закрытии вкладки таблица просто исчезает, ничего не сохраняется. Это и есть причина, по которой у инструмента нет истории и ссылок на результат — хранить его негде и незачем.

Примеры

Выгрузка заказов из ответа API
До: [{"id": 1, "city": "Kazan", "total": 4900}, {"id": 2, "city": "Omsk", "total": 12400}]
После: id | city | total 1 | Kazan | 4900 2 | Omsk | 12400
Список товаров с разным набором полей
До: [{"sku": "A-1", "price": 300}, {"sku": "A-2", "price": 450, "sale": true}]
После: sku | price A-1 | 300 A-2 | 450