Показать иерархию JSON / YAML как дерево в HTML? - PullRequest
Новая
       18

Показать иерархию JSON / YAML как дерево в HTML?

7 голосов
/ 28 октября 2008

У меня есть данные 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, и мои слабые попытки втиснуть данные во что-то полезное, похоже, не работают.

Спасибо за любую помощь.

Ответы [ 3 ]

8 голосов
/ 29 октября 2008

С этим вы можете конвертировать ваши данные 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;
}
7 голосов
/ 29 октября 2008

Я наконец-то придумал супер-элегантный способ сделать это примерно в 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, в виде простого старого списка.

1 голос
/ 29 октября 2008

Версия 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, и дерево должно появиться.

...