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 的树视图，但它不接受直接的 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

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 构造函数，树就会出现。

于 2008-10-28T22:27:23.660 回答