Visualizzare la gerarchia JSON / YAML come un albero in HTML?

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

Domanda

Ho dati YAML che sembrano in questo modo, ma ~ 150k di esso: 

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

... o la stessa cosa in JSON: 

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

Voglio presentare questo contenuto in una vista ad albero HTML JavaScripty espandibile (esempi: 1 , 2 ) per facilitare l'esplorazione. Come posso farlo?

Suppongo che ciò che voglio davvero capire è come prendere questi dati YAML / JSON e visualizzarli automaticamente come un albero (con le chiavi hash ordinate in ordine alfabetico). Finora ho avuto a che fare con Vista ad albero di YUI , ma non accetta direttamente JSON e i miei deboli tentativi di trasferire i dati in qualcosa di utile non sembrano funzionare.

Grazie per l'aiuto.

È stato utile?

Soluzione 2

Alla fine ho trovato un modo super-elegante per farlo in circa 5 righe di codice, basato sul fatto che il semplice YAML assomiglia molto a Markdown .

Iniziamo con questo: 

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

Usa regexps (in questo caso, in Perl) per rimuovere il --- iniziale e metti i trattini prima della chiave su ogni riga: 

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

Voila, Markdown: 

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

Ora, basta eseguirlo attraverso un processore Markdown: 

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

E ottieni un elenco HTML - pulito, semantico, retrocompatibile: 

<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 può migliorare gli elenchi esistenti, quindi concludiamo tutto: 

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

Quindi tutto funziona a circa 5 righe di codice (trasforma YAML in Markdown, trasforma Markdown in un elenco HTML e posiziona tale elenco HTML all'interno di un file HTML modello. L'HTML generato è progressivamente migliorato / degradabile, poiché è completamente visualizzabile su browser non JavaScript come un semplice vecchio elenco.

Altri suggerimenti

Con questo puoi convertire i tuoi dati JSON in DIV ben nidificati. Non l'ho testato con un gran numero di set di dati, ma sembra funzionare. 

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 versione 2.6 di TreeView di YUI ora accetta un oggetto JavaScript ma non in questo formato e non lo ordinerà automaticamente. Dovresti usare l'utility JSON di YUI per convertirla in un vero JavaScript che dovrai attraversare. Il tuo campione dovrà essere convertito in qualcosa del genere: 

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

Probabilmente mi manca qualche virgola o qualcosa del genere. I tuoi dati in arrivo potrebbero non essere ordinati, quindi dovrai ordinare ogni array. Quindi, devi solo passare questo oggetto come secondo argomento al costruttore TreeView e l'albero dovrebbe apparire.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top