Показать иерархию JSON / YAML в виде дерева в HTML?
-
05-07-2019 - |
Вопрос
У меня есть данные YAML, которые выглядят примерно так, но ~ 150k из них:
---
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, и мои слабые попытки втиснуть данные во что-то полезное, похоже, не работают.
Спасибо за любую помощь.
Решение 2
Я наконец-то придумал супер-элегантный способ сделать это примерно в 5 строках кода, основываясь на том факте, что простой YAML очень похоже на Markdown .
Мы начинаем с этого:
---
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, в виде простого старого списка.
Другие советы
С этим вы можете конвертировать ваши данные 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;
}
Версия 2.6 TreeView YUI теперь принимает объект JavaScript, но не в этом формате, и не сортирует его автоматически. Вам придется использовать утилиту JSON YUI, чтобы преобразовать ее в реальный JavaScript, который вам придется пройти. Ваш образец должен быть преобразован во что-то вроде этого:
{label:"all", children[
{label:"bar", children:[
{label:"baz: 37628"},
{label:"quux", children[
{label:"a: 179"},
{label:"b: 7"}
]},
{label:"foo: 1025"}
]}
]}
Возможно, я пропустил запятую или что-то в этом роде Ваши входящие данные могут быть не отсортированы, поэтому вам придется сортировать каждый массив. Затем вам просто нужно передать этот объект как второй аргумент в конструктор TreeView, и дерево должно появиться.