在HTML中将JSON / YAML层次结构显示为树？

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

我想在可扩展的JavaScripty HTML树视图中呈现此内容（示例： 1 ， 2 ），以便于探索。我该怎么做？

我想我真正想弄清楚的是如何获取这个YAML / JSON数据，并自动将其显示为树（使用按字母顺序排序的哈希键）。到目前为止，我一直在与 YUI的树视图争吵，但它不接受直接JSON，以及我将数据按到有用的东西上的微弱尝试似乎都没有起作用。

感谢您的帮助。

有帮助吗？

解决方案 2

基于简单的 YAML 看起来很像 Markdown 。

我们从这开始：

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

使用regexps（在本例中为Perl）删除起始 --- ，并在每行的键之前加上连字符：

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

Voila，Markdown：

- 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浏览器上可以看作普通的旧列表。

其他提示

您可以使用此方法将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构造函数的第二个参数传递，树就应该出现。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top