Что такое редактор дерева JSON?

JSON хранит данные в виде объектов, содержащих именованные значения, и массивов, содержащих упорядоченные списки. Поскольку они могут быть вложенными, большой документ сложно изменять в обычном текстовом редакторе: всего одна пропущенная запятая или скобка делает весь файл недействительным. Редактор дерева отображает те же данные в виде набора узлов, которые можно разворачивать и сворачивать. Вы можете напрямую изменить значение, переименовать ключ, добавить или удалить узел, а инструмент сам позаботится о запятых, кавычках и скобках.

Описание инструмента

Этот инструмент позволяет редактировать JSON в виде дерева. Вставьте JSON, и он отобразится как дерево объектов, массивов и значений. Используйте значок карандаша рядом с узлом, чтобы изменить его ключ или значение, значок плюса рядом с объектом или массивом, чтобы добавить дочерний элемент, и значок корзины, чтобы удалить узел. Каждое изменение сразу записывается обратно в текст JSON, поэтому после завершения работы вы можете скопировать результат. Вы также можете вводить текст в редакторе, и дерево будет обновляться. Всё происходит в вашем браузере, а ваши данные никуда не отправляются.

Примеры

Начните с этого JSON:

{
  "name": "пример-приложение",
  "port": 8080,
  "tags": ["JSON", "дерево"]
}
JSON

Измените port на 3000, добавьте строку редактор в tags и добавьте новый ключ private со значением true. Текст станет таким:

{
  "name": "пример-приложение",
  "port": 3000,
  "tags": ["JSON", "дерево", "редактор"],
  "private": true
}
JSON

Возможности

  • Редактирование ключей, строк, чисел, логических значений и значений null непосредственно на месте
  • Добавление новых ключей в объекты и новых элементов в массивы, а также удаление любого узла, кроме корневого
  • Изменение типа значения, например со строки на число
  • Сохранение порядка ключей и предупреждение о том, что ключ уже используется в том же объекте
  • Разворачивание и сворачивание всего дерева с отображением количества узлов

Как это работает

Инструмент анализирует ваш текст как JSON и отображает результат в виде дерева. Когда вы вносите изменение, он создаёт новую копию данных с этим изменением и записывает её обратно в виде текста с отступом в 2 пробела. При переименовании ключа его положение среди соседних ключей сохраняется. Ключи, похожие на целые числа, например "1" или "2", всегда отображаются первыми в порядке возрастания, как в любом JSON-парсере JavaScript.

Значение может иметь один из шести типов: строка, число, логическое значение, null, объект или массив. Новые объекты и массивы создаются пустыми, а элементы в них добавляются с помощью кнопки плюса. Объект или массив, в котором уже есть дочерние элементы, сохраняет свой тип, поэтому вы не сможете случайно удалить его содержимое, но по-прежнему сможете переименовать его ключ.

Советы

  • Нажмите Enter, чтобы сохранить изменение, и Escape, чтобы отменить его. В строке нажмите Shift и Enter, чтобы добавить перенос строки
  • Если текст слева не является корректным JSON, дерево остаётся пустым, а ошибка отображается до тех пор, пока вы её не исправите
  • В дереве нет функции отмены действий, поэтому при сомнениях сохраните копию исходного JSON перед изменением
  • Числа больше 9007199254740991 теряют точность, поскольку числа JSON считываются как числа JavaScript
  • Чтобы только просматривать JSON без внесения изменений, используйте просмотрщик дерева JSON