JSON/YAML階層をHTMLでツリーとして表示しますか?

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

質問

次のような YAML データがありますが、そのうちの約 150k は次のとおりです。

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

...または、JSON でも同じことを行います。

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

このコンテンツを展開可能な JavaScript HTML ツリー ビューで表示したいと考えています (例: 1, 2) 探索を容易にするためです。どうすればいいでしょうか？

私が本当に理解したいのは、この YAML/JSON データを取得し、それをツリーとして (ハッシュ キーがアルファベット順にソートされて) 自動的に表示する方法だと思います。これまで喧嘩してきたのは、 YUIのツリービュー, 、しかし、それはそのままのJSONを受け入れません、そして、データを何か有用なものにマッサージしようとする私の弱い試みはうまくいかないようです。

助けていただきありがとうございます。

役に立ちましたか？

解決 2

私は最終的に、これを約 5 行のコードで行う非常にエレガントな方法を思いつきました。 YAML とても似ています マークダウン.

まずはこれから始めます:

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

正規表現 (この場合は Perl) を使用して、先頭の文字列を削除します。 ---, 、各行のキーの前にハイフンを置きます。

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

ほら、マークダウンです:

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

あとは、Markdown プロセッサを通じて実行するだけです。

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

そして、クリーンでセマンティックで下位互換性のある HTML リストを取得します。

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

ゆいツリービュー 既存のリストを強化できるので、すべてをまとめます。

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

したがって、これはすべて約 5 行のコードになります (YAML を Markdown に変換し、Markdown を HTML リストに変換し、その HTML リストをテンプレート HTML ファイル内に配置します)。生成された HTML は、非 JavaScript ブラウザ上で単純な古いリストとして完全に表示できるため、段階的に強化/劣化可能です。

他のヒント

これを使用して、JSONデータを適切にネストされたDIVに変換できます。多数のデータセットでテストしたことはありませんが、動作するようです。

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

YUIのTreeViewのバージョン2.6はJavaScriptオブジェクトを取りますが、この形式ではなく、自動的にソートしません。 YUIのJSONユーティリティを使用して、トラバースする必要がある実際のJavaScriptに変換する必要があります。サンプルは次のように変換する必要があります。

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

コンマなどが不足している可能性があります。受信データはソートされない可能性があるため、各配列をソートする必要があります。次に、このオブジェクトをTreeViewコンストラクターの2番目の引数として渡すだけで、ツリーが表示されます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top