Exibir hierarquia JSON/YAML como uma árvore em HTML?

StackOverflow https://stackoverflow.com/questions/244601

Pergunta

Eu tenho dados da YAML que se parecem com isso, mas ~ 150k dele:

---
all:
  foo: 1025
  bar:
    baz: 37628
    quux:
      a: 179
      b: 7

... ou a mesma coisa em JSON:

{"all":{"bar":{"baz":"37628","quux":{"a":"179","b":"7"}},"foo":"1025"}}

Quero apresentar esse conteúdo em uma exibição de árvore JavaScripty HTML expansível (exemplos: 1, 2) para facilitar a exploração. Como eu faço isso?

Acho que o que realmente quero descobrir é como pegar esses dados YAML/JSON e exibi -los automaticamente como uma árvore (com as teclas de hash classificadas em ordem alfabética). Até agora, eu estive lutando com Vista da árvore de Yui, mas não aceita JSON direto, e minhas déficitas tentativas de massagear os dados em algo útil não parecem estar funcionando.

Obrigado por qualquer ajuda.

Foi útil?

Solução 2

Finalmente criei uma maneira super-elegante de fazer isso em cerca de 5 linhas de código, com base no fato de que o simples Yaml parece muito parecido Markdown.

Estamos começando com isso:

---
all:
  foo: 1025
  bar:
    baz: 37628
    quux:
      a: 179
      b: 7

Use regexps (neste caso, em perl) para remover a partida ---, e coloque os hífens antes da chave em cada linha:

$data =~ s/^---\n//s;
$data =~ s/^(\s*)(\S.*)$/$1- $2/gm;

Voila, Markdown:

- all:
  - foo: 1025
  - bar:
    - baz: 37628
    - quux:
      - a: 179
      - b: 7

Agora, basta executá -lo através de um processador de marcação:

use Text::Markdown qw( markdown );
print markdown($data);

E você obtém uma lista HTML-limpa, semântica, compatível com as costas:

<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 Pode melhorar as listas existentes, então encerramos tudo:

<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>

Portanto, tudo isso acaba com cerca de 5 linhas de código (transforme a YAML em markdown, transforme o Markdown em uma lista HTML e coloque essa lista HTML dentro de um arquivo HTML de modelo. O HTML gerado é progressivamente aprimorado / degradável, uma vez que é totalmente visível no NON -JavaScript navegadores como uma lista antiga simples.

Outras dicas

Você pode converter seus dados JSON em divs bem aninhados com isso. Não o testei com um amplo número de conjuntos de dados, mas parece funcionar.

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;
}

A versão 2.6 do TreeView de Yui agora pega um objeto JavaScript, mas não neste formato e não o classificará automaticamente. Você teria que usar o utilitário JSON de Yui para convertê -lo em um JavaScript real que você terá que atravessar. Sua amostra terá que ser convertida para algo assim:

{label:"all", children[
    {label:"bar", children:[
        {label:"baz: 37628"},
        {label:"quux", children[
            {label:"a: 179"},
            {label:"b: 7"}
        ]},
        {label:"foo: 1025"}
    ]}
]}

Provavelmente perdi alguma vírgula ou algo assim. Seus dados recebidos podem não ser classificados, então você terá que classificar cada matriz. Então, você só precisa passar esse objeto como o segundo argumento para o construtor de árvores e a árvore deve aparecer.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top