我有看起来像这样的YAML数据，但是大约有15万：
---
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's tree view，但是它不接受直接的JSON，并且我微不足道的尝试将数据压缩为有用的东西似乎无效。
感谢您的帮助。
您可以使用此方法将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;
}
基于简单的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;
Voila，降价：
- 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浏览器上作为简单的旧列表。
现在，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构造函数，然后树就会出现。