Отображать иерархию JSON / YAML в виде дерева в HTML?
У меня есть данные YAML, которые выглядят примерно так, но их около 150 КБ:
---
all:
foo: 1025
bar:
baz: 37628
quux:
a: 179
b: 7
... или то же самое в JSON:
{"all":{"bar":{"baz":"37628","quux":{"a":"179","b":"7"}},"foo":"1025"}}
Я хочу представить это содержимое в виде расширяемого древовидного представления JavaScripty HTML (примеры: 1, 2), чтобы упростить его изучение. Как мне это сделать?
Я предполагаю, что я действительно хочу выяснить, как взять эти данные YAML / JSON и автоматически отобразить их в виде дерева (с хеш-ключами, отсортированными по алфавиту). До сих пор я боролся с Древовидное представление YUI, но он не принимает прямой JSON, и мои слабые попытки преобразовать данные во что-то полезное, похоже, не работают.
Спасибо за любую помощь.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Версия 2.6 TreeView YUI теперь принимает объект JavaScript, но не в этом формате, и не будет сортировать его автоматически. Вам нужно будет использовать утилиту YUI JSON, чтобы преобразовать его в реальный JavaScript, который вам придется пройти. Ваш образец нужно будет преобразовать примерно так:
{label:"all", children[
{label:"bar", children:[
{label:"baz: 37628"},
{label:"quux", children[
{label:"a: 179"},
{label:"b: 7"}
]},
{label:"foo: 1025"}
]}
]}
Я, наверное, пропустил какую-то запятую или что-то в этом роде. Ваши входящие данные могут не быть отсортированы, поэтому вам придется отсортировать каждый массив. Затем вам просто нужно передать этот объект в качестве второго аргумента конструктору TreeView, и дерево должно появиться.
С его помощью вы можете преобразовать свои данные JSON в красиво вложенные DIV. Я не тестировал его с большим количеством наборов данных, но, похоже, он работает.
function renderJSON(obj) {
'use strict';
var keys = [],
retValue = "";
for (var key in obj) {
if (typeof obj[key] === 'object') {
retValue += "<div class='tree'>" + key;
retValue += renderJSON(obj[key]);
retValue += "</div>";
} else {
retValue += "<div class='tree'>" + key + " = " + obj[key] + "</div>";
}
keys.push(key);
}
return retValue;
}
@Anirvan, вы можете проверить расширяемое / сворачиваемое дерево HTML здесь, сторонняя библиотека не требуется.
В конце концов я придумал супер-элегантный способ сделать это примерно в 5 строках кода, основанный на том факте, что простой YAML очень похож на Уценка.
Начнем с этого:
---
all:
foo: 1025
bar:
baz: 37628
quux:
a: 179
b: 7
Используйте регулярные выражения (в данном случае в Perl), чтобы удалить начальный ---, и поставьте дефис перед ключом в каждой строке:
$data =~ s/^---\n//s;
$data =~ s/^(\s*)(\S.*)$/$1- $2/gm;
Вуаля, уценка:
- all:
- foo: 1025
- bar:
- baz: 37628
- quux:
- a: 179
- b: 7
Теперь просто запустите его через процессор Markdown:
use Text::Markdown qw( markdown );
print markdown($data);
И вы получите список HTML - чистый, семантический, обратно совместимый:
<ul>
<li>all:
<ul>
<li>foo: 1025</li>
<li>bar:</li>
<li>baz: 37628</li>
<li>quux:
<ul>
<li>a: 179</li>
<li>b: 7</li>
</ul>
</li>
</ul>
</li>
</ul>
YUI Treeview может улучшать существующие списки, поэтому мы завершаем все это:
<html>
<head>
<!-- CSS + JS served via YUI hosting: developer.yahoo.com/yui/articles/hosting/ -->
<link rel = "stylesheet" type = "text/css" href = "http://yui.yahooapis.com/combo?2.6.0/build/treeview/assets/skins/sam/treeview.css">
<script type = "text/javascript" src = "http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/treeview/treeview-min.js"></script>
</head>
<body>
<div id = "markup" class = "yui-skin-sam">
<!-- start Markdown-generated list -->
<ul>
<li>all:
<ul>
<li>foo: 1025</li>
<li>bar:</li>
<li>baz: 37628</li>
<li>quux:
<ul>
<li>a: 179</li>
<li>b: 7</li>
</ul>
</li>
</ul>
</li>
</ul>
<!-- end Markdown-generated list -->
</div>
<script type = "text/javascript">
var treeInit = function() {
var tree = new YAHOO.widget.TreeView("markup");
tree.render();
};
YAHOO.util.Event.onDOMReady(treeInit);
</script>
</body>
</html>
Таким образом, все это работает примерно до 5 строк кода (превратите YAML в Markdown, превратите Markdown в список HTML и поместите этот список HTML в файл HTML шаблона. Сгенерированный HTML постепенно улучшается / деградируется, так как он полностью доступен для просмотра на не -JavaScript-браузеры в виде простого старого списка.
Это хорошо, но обратите внимание: списки уценки должны иметь отступ по 4 символа на уровень, чтобы быть совместимыми со спецификациями. (Отступ в 2 пробела будет работать во многих средствах визуализации, однако продолжение и вложение кода не будут работать регулярно.)
Это берет список и превращает его во вложенные блоки div, но не превращает блоки в расширяемый / сворачиваемый список.