javascript - ¿Visualiza la jerarquía JSON/YAML como un árbol en HTML?
js-yaml (4)
La versión 2.6 de TreeView de YUI ahora toma un objeto de JavaScript pero no en este formato y no lo ordena automáticamente. Debería usar la utilidad JSON de YUI para convertirla a un JavaScript real que tendrá que atravesar. Tu muestra deberá convertirse a 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 falta algo de coma o algo así. Es posible que sus datos entrantes no estén ordenados, por lo que tendrá que ordenar cada matriz. Entonces, solo necesita pasar este objeto como el segundo argumento al constructor TreeView y debería aparecer el árbol.
Tengo datos de YAML que se ven así, pero ~ 150k de eso:
---
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?
Creo 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 de hash ordenadas alfabéticamente). Hasta ahora, he estado luchando con la vista en árbol de YUI , pero no acepta JSON directamente, y mis débiles intentos de dar masajes a los datos en algo útil no parecen estar funcionando.
Gracias por cualquier ayuda.
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 .
Estamos comenzando con esto:
---
all:
foo: 1025
bar:
baz: 37628
quux:
a: 179
b: 7
Use expresiones regulares (en este caso, en Perl) para eliminar el comienzo --- , y ponga guiones antes de la tecla 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 terminamos 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>
Así que todo esto funciona en aproximadamente 5 líneas de código (convertir YAML en Markdown, convertir Markdown en una lista HTML y colocar esa lista HTML dentro de un archivo HTML de plantilla. El HTML generado es progresivamente mejorado / degradable, ya que es completamente visible en non -JavaScript navegadores como una simple lista anterior.
Puede convertir sus datos JSON a DIVs muy bien anidados con esto. 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;
}
Usé la función http://phpjs.org/functions/var_dump que simula var_dump() desde PHP.
Lo llamé de esta manera:
var data=document.body
var val=''<pre>''+var_dump(data)+''</pre>''
$("#result").html(val)
Aquí hay un Fiddle con la función var_dump modificada.
La salida se ve así:
array(5) {
[key1] =>
string(6) "value1"
[key2] =>
string(6) "value2"
[key3] =>
string(6) "value3"
[key4] =>
array(4) {
[0] =>
string(5) "item1"
[1] =>
string(5) "item2"
[2] =>
string(5) "item3"
[3] =>
string(5) "item4"
}
[key5] =>
array(4) {
[a] =>
string(1) "a"
[b] =>
string(1) "b"
[c] =>
string(1) "c"
[d] =>
string(1) "d"
}
}
... pero sin resaltado de sintaxis
Y puede controlar el tamaño de la pestaña usando pad_val varibale al comienzo de la función.