10

このような 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"}}

このコンテンツを展開可能な JavaScripty HTML ツリー ビュー (例: 1、2 ) で表示して、探索しやすくしたいと考えています。どうすればいいですか？

私が本当に知りたいのは、この YAML/JSON データを取得し、それをツリーとして自動的に表示する方法です (ハッシュ キーはアルファベット順に並べ替えられます)。これまでのところ、私はYUI の tree viewと格闘してきましたが、それはそのままの JSON を受け入れず、データを有用なものに変換しようとする私の弱い試みは機能していないようです。

助けてくれてありがとう。

4

3 に答える 3

9

これにより、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;
}
于 2008-10-29T16:11:46.180 に答える
8

単純なYAMLがMarkdownによく似ているという事実に基づいて、私はついに約5行のコードでこれを行うための非常にエレガントな方法を思いつきました。

これから始めます：

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

YUI Treeviewは既存のリストを拡張できるため、すべてをまとめます。

<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ブラウザ。

于 2008-10-29T16:46:11.807 に答える
1

バージョン 2.6 の YUI の TreeView は 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 番目の引数として渡すだけで、ツリーが表示されます。

于 2008-10-28T22:27:23.660 に答える