Как создать древовидное представление общих данных JSON в HTML?

Question

У меня есть некоторые данные, хранящиеся в формате JSON. Я хотел бы иметь возможность отображать его в браузере в виде динамической древовидной структуры аналогичным образом, MongoVUE представляет документы mondodb: Снимок экрана

Я нашел очень хороший плагин jquery, названный jsTree. К сожалению, для обработки документов JSON требуется, чтобы данные имели очень конкретную многословную (и, на мой взгляд, избыточную) структуру: ссылку. Использование этого означает значительные изменения моих документов JSON. Я скорее ищу инструмент, который способен строить дерево автоматически, не внося серьезных ручных корректировок в данные, но в то же время позволяя мне, возможно, применить некоторые модификации к представлению.

Инструмент на json.bloople.net делает что-то похожее, используя таблицу, но поскольку у меня есть несколько уровней вложенных документов, вывод выглядит очень раздутым. Кроме того, структура не является динамически складываемой.

Буду признателен за любые подсказки относительно правильных инструментов для выполнения работы, включая те, которые могут потребовать (автоматизированной!) Предварительной обработки данных JSON в Java/Groovy или чистого решения на основе JavaScript.

Answer 1

Это просто простой пример того, как вы могли бы вывести дерево, как JSON структура в HTML. http://jsfiddle.net/K2ZQQ/1/ (см. здесь поддержку браузера для пробелов). Обратите внимание, что второй параметр JSON.stringify это replacer функция:

С http://msdn.microsoft.com/en-us/library/ie/cc836459(v=vs.94).aspx

Если replacer является функцией, JSON.stringify вызывает функцию, передавая ключ и значение каждого члена. Возвращаемое значение используется вместо исходного значения. Если функция возвращает неопределенное значение, член исключается. Ключом для корневого объекта является пустая строка: "".

Так что, если вам нужно добавить какие-либо дополнительные изменения в отображение вашего JSON дерево replacer функция может помочь