¿Desea mostrar la jerarquía JSON / YAML como un árbol en HTML?

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

Pregunta

Tengo datos YAML que parecen algo así, pero ~ 150k de ellos: 

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

... o lo mismo en JSON: 

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

Quiero presentar este contenido en una vista de árbol HTML JavaScripty expandible (ejemplos: 1 , 2 ) para que sea más fácil de explorar. ¿Cómo hago esto?

Supongo que lo que realmente quiero averiguar es cómo tomar estos datos de YAML / JSON y mostrarlos automáticamente como un árbol (con las teclas hash ordenadas alfabéticamente). Hasta ahora, he estado luchando con vista de árbol de YUI , pero no acepta directamente JSON, y mis débiles intentos de masajear los datos en algo útil no parecen estar funcionando.

Gracias por cualquier ayuda.

¿Fue útil?

Solución 2

Finalmente se me ocurrió una forma súper elegante de hacer esto en aproximadamente 5 líneas de código, basado en el hecho de que el simple YAML se parece mucho a Markdown .

Comenzamos con esto: 

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

Use regexps (en este caso, en Perl) para eliminar el --- inicial, y ponga guiones antes de la clave en cada línea: 

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

Voila, Markdown: 

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

Ahora, simplemente ejecútelo a través de un procesador Markdown: 

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

Y obtienes una lista HTML: limpia, semántica, compatible con versiones anteriores: 

<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 puede mejorar las listas existentes, así que lo resumimos todo: 

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

Entonces, todo esto se resuelve en aproximadamente 5 líneas de código (convierta YAML en Markdown, convierta Markdown en una lista HTML y coloque esa lista HTML dentro de un archivo HTML de plantilla. El HTML generado es progresivamente mejorado / degradable, ya que es completamente visible en los navegadores que no son JavaScript como una lista antigua sin formato.

Otros consejos

Con esto puedes convertir tus datos JSON a DIVs bien anidados. No lo he probado con una gran cantidad de conjuntos de datos, pero 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;
}

La versión 2.6 de TreeView de YUI ahora toma un objeto de JavaScript pero no en este formato y no lo ordenará automáticamente. Tendría que usar la utilidad JSON de YUI para convertirla en un JavaScript real que deberá atravesar. Tu muestra tendrá que convertirse en algo como esto: 

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

Probablemente me haya faltado una coma o algo así. Es posible que sus datos entrantes no se clasifiquen, por lo que tendrá que ordenar cada matriz. Luego, solo debe pasar este objeto como segundo argumento al constructor TreeView y el árbol debería aparecer.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top