Отобразить иерархию JSON/YAML как дерево в HTML?
Да, в JDK есть такая странная ошибка, с которой вы обычно никогда не сталкивались, если не начали делать вложенные массивы в JS: https://github.com/intuit/karate/blob/master/karate-junit4/ src / test / java / com / intuit / karate / junit4 / demos / js-arrays.feature # L44
Обходной путь здесь заключается в создании JSON с использованием каратэ, а не JS:
[116 ] РЕДАКТИРОВАТЬ: см. Использование read() ниже вместо «in-line»:
# * def conf = { "configParameters": [{ "keyName": "N/A", "value": "testValue" }], "id": 4 }
* def fun =
"""
function(fleetId) {
var result = {};
result.name = "TestConnection";
result.fleetId = fleetId;
var conf = read('conf.json');
result.connectionConfigDefault = conf;
return result;
}
"""
Поскольку в каратэ очень много хороших способов, почему бы вам не использовать их:
* def fleetId = 1
* set temp
| path | value |
| name | 'TestConnection' |
| fleetId | fleetId |
| connectionConfigDefault | { "configParameters": [{ "keyName": "N/A", "value": "testValue" }], "id": 4 } |
* print temp
3 ответа
Я наконец придумал суперизящный способ выполнить в этом приблизительно 5 строк кода, на основе того, что простой YAML много походит на Скидку с цены.
Мы начинаемся с этим:
---
all:
foo: 1025
bar:
baz: 37628
quux:
a: 179
b: 7
Используйте regexps (в этом случае в 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 в Скидку с цены, превратите Скидку с цены в список HTML и место что список HTML в файле шаблона HTML. Сгенерированный HTML прогрессивно улучшил / разлагаемый, так как это полностью видимо на браузерах не-JavaScript как простой список.
Можно преобразовать данные JSON в приятно вложенные ОТДЕЛЕНИЯ с этим. Я не протестировал его с широким количеством наборов данных, но это, кажется, работает.
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;
}
Версия 2.6 TreeView YUI теперь берет объект JavaScript, но не в этом формате и не отсортирует его автоматически. Необходимо было бы использовать утилиту JSON YUI для преобразования его в фактический JavaScript, который необходимо будет пересечь. Ваш образец должен будет быть преобразован во что-то вроде этого:
{label:"all", children[
{label:"bar", children:[
{label:"baz: 37628"},
{label:"quux", children[
{label:"a: 179"},
{label:"b: 7"}
]},
{label:"foo: 1025"}
]}
]}
У меня есть, вероятно, пропавшие без вести некоторой запятой или чего-то. Ваши входящие данные не могли бы быть отсортированы так, необходимо будет отсортировать каждый массив. Затем просто необходимо передать этот объект как второй аргумент конструктору TreeView, и дерево должно появиться.