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

我的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,而我将数据按到有用的东西的微弱尝试似乎并没有起作用.

谢谢你的帮助.

您可以使用此方法将JSON数据转换为精美嵌套的DIV.我没有使用大量数据集对其进行测试,但它似乎有效.

function renderJSON(obj) {
    'use strict';
    var keys = [],
        retValue = "";
    for (var key in obj) {
        if (typeof obj[key] === 'object') {
            retValue += "
" + key;
            retValue += renderJSON(obj[key]);
            retValue += "
";
        } else {
            retValue += "
" + key + " = " + obj[key] + "
";
        }

        keys.push(key);
    }
    return retValue;
}

基于简单的YAML看起来很像Markdown的事实,我终于想出了一个超级优雅的方式来完成大约5行代码.

我们从这开始:

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

使用regexp(在本例中为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列表 - 干净,语义,向后兼容:

all:

foo: 1025
bar:
baz: 37628
quux:

a: 179
b: 7

YUI Treeview可以增强现有列表,因此我们将其全部包装起来:

all:

foo: 1025
bar:
baz: 37628
quux:

a: 179
b: 7

所以这一切都适用于大约5行代码(将YAML转换为Markdown,将Markdown转换为HTML列表,并将该HTML列表放在模板HTML文件中.生成的HTML逐步增强/降级,因为它在非完全可见-JavaScript浏览器作为一个普通的旧列表.