Afficher la hiérarchie JSON / YAML sous forme d'arborescence HTML?

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

Question

J'ai des données YAML qui ressemblent un peu à ceci, mais à environ 150 000: 

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

... ou la même chose en JSON: 

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

Je souhaite présenter ce contenu sous forme d'arborescence HTML JavaScript expansible (exemples: 1 , 2 ) pour faciliter l'exploration. Comment je fais ça?

Je suppose que ce que je veux vraiment savoir, c'est comment utiliser ces données YAML / JSON et les afficher automatiquement sous forme d'arborescence (avec les clés de hachage triées par ordre alphabétique). Jusqu'à présent, je me suis battu avec la l'arborescence de YUI , mais elle n'accepte pas directement JSON et mes faibles tentatives de transformation des données en données utiles ne semblent pas fonctionner.

Merci pour toute aide.

Était-ce utile?

La solution 2

J'ai finalement trouvé un moyen très élégant de faire cela en environ 5 lignes de code, basé sur le fait que le simple YAML ressemble beaucoup à Markdown .

Nous commençons avec ceci: 

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

Utilisez les expressions rationnelles (dans ce cas, en Perl) pour supprimer le --- de départ, et mettez des tirets avant la clé sur chaque ligne: 

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

Voila, Markdown: 

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

Maintenant, lancez-le simplement via un processeur Markdown: 

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

Et vous obtenez une liste HTML - propre, sémantique, compatible avec les versions antérieures: 

<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 peut améliorer les listes existantes, nous allons donc tout conclure: 

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

Donc tout cela correspond à environ 5 lignes de code (transformez YAML en Markdown, transformez Markdown en liste HTML et placez cette liste HTML dans un fichier HTML de modèle. Le code HTML généré est progressivement amélioré / dégradable, car totalement visible sur les navigateurs non-JavaScript sous forme de vieille liste.

Autres conseils

Vous pouvez convertir vos données JSON en des DIV parfaitement imbriquées avec cela. Je ne l'ai pas testé avec un grand nombre d'ensembles de données, mais cela semble fonctionner. 

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 version 2.6 de TreeView de YUI accepte maintenant un objet JavaScript, mais pas dans ce format et ne le triera pas automatiquement. Vous devrez utiliser l'utilitaire JSON de YUI pour le convertir en un JavaScript que vous devrez traverser. Votre échantillon devra être converti en quelque chose comme ceci: 

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

J'ai probablement manqué une virgule ou quelque chose comme ça. Vos données entrantes peuvent ne pas être triées, vous devrez donc trier chaque tableau. Ensuite, il vous suffit de transmettre cet objet en tant que deuxième argument au constructeur TreeView et l’arbre doit apparaître.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top