在HTML中显示JSON / YAML层次结构树？ [英] Display JSON/YAML hierarchy as a tree in HTML?
问题描述
我有YAML数据，看起来有点像这样，但约150k：
---
all：
foo：1025
bar：
baz：37628
quux：
a：179
b：7
{ 所有：{ 酒吧：{ 巴兹： 37628， QUUX：{ 一个： 179， b： 7}}， foo 的： 1025}}
我想在可扩展的JavaScripty HTML树视图中呈现此内容（示例： 1 ， 2 ），以方便探索。我怎么做到这一点？
我想我真正想弄清楚的是如何获取这个YAML / JSON数据，并自动将其显示为一棵树（使用散列按键按字母顺序排序）。到目前为止，我一直在使用 YUI的树形视图，但它不直接接受JSON，我的微软尝试按摩数据到一些有用的东西似乎并没有工作。
感谢您的任何帮助。
解决方案我终于想出了一个超级优雅的方式来做到这一点大约5行代码，基于这样一个事实，即简单的 YAML 看起来很像 Markdown 。
我们从此开始：
< code --- ---
all：
foo：1025
bar：
baz：37628
quux：
a：179
b ：7
使用正则表达式（在这种情况下，在Perl中）删除起始 --- ，并在每行的键前加上连字符：
$ data =〜s / ^ --- \\\
// s;
$ data =〜s / ^（\s *）（\S。*）$ / $ 1- $ 2 / gm;
Voila，Markdown：
- 全部：
- foo：1025
- bar：
- baz：37628
- quux：
- a：179
- b：7
现在，通过Markdown处理器运行它：
使用Text :: Markdown qw（markdown）;
print markdown（$ data）;
你得到一个HTML列表 - 干净，语义，向后兼容：
< ul>
< li>全部：
< ul>
< li> foo：1025< / li>
< li>栏：< / li>
< li> baz：37628< / li>
< li> quux：
< ul>
< li> a：179< / li>
< li> b：7< / li>
< / ul>< / li>
< / ul>< / li>
< / ul> b
$ b =noreferrer> YUI Treeview 可以增强现有的列表，所以我们将它们全部包装起来：
< html> ;< HEAD>
<！ - 通过YUI托管服务的CSS + JS：developer.yahoo.com/yui/articles/hosting/ - >
< script type =text / javascriptsrc =http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6 0.0 /建造/树状/树状-min.js>< /脚本>
< / head>< body>
< div id =markupclass =yui-skin-sam>
<！ - 开始减价生成列表 - >
< ul>
< li>全部：
< ul>
< li> foo：1025< / li>
< li>栏：< / li>
< li> baz：37628< / li>
< li> quux：
< ul>
< li> a：179< / li>
< li> b：7< / li>
< / ul>< / li>
< / ul>< / li>
< / ul>
<！ - 结束降价生成列表 - >
< / 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浏览器中作为普通旧列表完全查看。
I have YAML data that looks sort of like this, but ~150k of it:
---
all:
foo: 1025
bar:
baz: 37628
quux:
a: 179
b: 7
...or the same thing in JSON:
{"all":{"bar":{"baz":"37628","quux":{"a":"179","b":"7"}},"foo":"1025"}}
I want to present this content in an expandable JavaScripty HTML tree view (examples: 1, 2) to make it easier to explore. How do I do this?
I guess what I really want to figure out is how to take this YAML/JSON data, and automatically display it as a tree (with hash keys sorted alphabetically). So far, I've been tussling with YUI's tree view, but it doesn't accept straight JSON, and my feeble attempts to massage the data into something useful don't seem to be working.
Thanks for any help.
解决方案 I finally came up with a super-elegant way to do this in about 5 lines of code, based on the fact that the simple YAML looks a lot like Markdown.
We're starting off with this:
---
all:
foo: 1025
bar:
baz: 37628
quux:
a: 179
b: 7
Use regexps (in this case, in Perl) to remove the starting ---, and put hyphens before the key on each line:
$data =~ s/^---\n//s;
$data =~ s/^(\s*)(\S.*)$/$1- $2/gm;
Voila, Markdown:
- all:
- foo: 1025
- bar:
- baz: 37628
- quux:
- a: 179
- b: 7
Now, just run it through a Markdown processor:
use Text::Markdown qw( markdown );
print markdown($data);
And you get an HTML list -- clean, semantic, backwards-compatible:
<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 can enhance existing lists, so we wrap it all up:
<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>
So this all works out to about 5 lines of code (turn YAML into Markdown, turn Markdown into an HTML list, and place that HTML list inside a template HTML file. The generated HTML's progressively-enhanced / degradable, since it's fully viewable on non-JavaScript browsers as a plain old list.
这篇关于在HTML中显示JSON / YAML层次结构树？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
