JSON/YAML -Hierarchie als Baum in HTML anzeigen?

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

Frage

Ich habe YAML -Daten, die so aussehen, aber ~ 150.000 davon:

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

... oder dasselbe in JSON:

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

Ich möchte diesen Inhalt in einer erweiterbaren Javascripty -HTML -Baumansicht präsentieren (Beispiele: 1, 2), um es einfacher zu erforschen. Wie mache ich das?

Ich denke, ich möchte wirklich herausfinden, wie man diese YAML/JSON -Daten nimmt und sie automatisch als Baum anzeigt (mit Hash -Tasten sortiert alphabetisch). Bisher habe ich mich mit dem Strich gestrichen Yuis Baumansicht, Aber es akzeptiert nicht gerade JSON, und meine schwachen Versuche, die Daten in etwas Nützliches zu massieren, scheint nicht zu funktionieren.

Danke für jede Hilfe.

War es hilfreich?

Lösung 2

Ich hatte endlich eine super-elegante Möglichkeit, dies in etwa 5 Codezeilen zu tun, basierend auf der Tatsache, dass die einfache Yaml sieht sehr ähnlich aus Markdown.

Wir beginnen damit:

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

Verwenden Sie Regexps (in diesem Fall in Perl), um das Start zu entfernen ---, und stellen Sie bei jeder Zeile den Bindestrich vor den Schlüssel:

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

Voila, Markdown:

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

Führen Sie es jetzt einfach durch einen Markdown -Prozessor:

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

Und Sie erhalten eine HTML-Liste-sauber, semantisch, rückwärtskompatibel:

<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 Kann vorhandene Listen verbessern, also wickeln wir alles ein:

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

Dies alles entspricht ungefähr 5 Codezeilen (yaml in Markdown verwandeln, Markdown in eine HTML-Liste verwandeln und diese HTML -Javascript Browser als einfache alte Liste.

Andere Tipps

Sie können Ihre JSON -Daten damit in gut verschachtelte Divs konvertieren. Ich habe es nicht mit einer Vielzahl von Datensätzen getestet, aber es scheint zu funktionieren.

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

Version 2.6 von Yuis TreeView nimmt jetzt ein JavaScript -Objekt, aber nicht in diesem Format und sortiert es nicht automatisch. Sie müssten das JSON -Dienstprogramm von Yui verwenden, um es in ein aktuelles JavaScript umzuwandeln, das Sie durchqueren müssen. Ihr Beispiel muss in so etwas konvertiert werden:

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

Ich habe wahrscheinlich ein Komma oder so etwas verpasst. Ihre eingehenden Daten werden möglicherweise nicht sortiert, sodass Sie jedes Array sortieren müssen. Dann müssen Sie dieses Objekt nur als zweites Argument an den TreeView -Konstruktor übergeben und der Baum sollte erscheinen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top