Я ищу библиотеку Javascript FOSS для рендеринга JSON с возможностью сворачивания вложенных объектов.
Это будет для рендеринга в DOM, поэтому плагины для браузера не подойдут. Очень похоже на http://json.parser.online.fr/beta/
Только что быстро запачкался: скрипка
CSS:
ul {
margin-left: 1em;
}
.json-key {
font-weight: bold;
}
.ui-icon {
float:left;
margin-right:3px;
}
.childless {
margin-left:18px;
}
JavaScript:
function visitObj($container, obj) {
var $ul = $('<ul>');
for (var prop in obj) {
var $li = $('<li>');
if (typeof obj[prop] === "object") {
$li.append('<span class="ui-icon ui-icon-plus"></span><span class="ui-icon ui-icon-minus"></span><span class="json-key">' + prop + ': </span>');
visitObj($li, obj[prop]);
} else {
$li.append('<span class="json-key childless">' + prop + ': </span><span class="json-value">'+obj[prop]+'</span>');
}
$ul.append($li);
}
$container.append($ul);
}
visitObj($('#json-viewer'), {
"Attempted":"EditUser",
"Exception":{
"Message":"Something",
"TargetSite":"somewhere",
"Inner Exception":{
"Message":"Something else",
"TargetSite":"somewhere.core",
"Inner Exception":{
"Message":"Another message",
"TargetSite":"something.core.subr",
"Inner Exception":{
"Message":"Object reference not set to an instance of an object.",
"TargetSite":"System.Web.Mvc.ActionResult Update(Int32, System.String, System.String)",
"StackTrace":[
"at Application.Controllers.AdminController.Update(Int32 id, String email, String password) in c:\\Docs\\Apps\\Main\\MyBranch\\Source\\Application\\Application\\Controllers\\AdminController.cs:line 123"
],
"Inner Exception":{
}
}
}
}
},
"details":{
"userEmail":"test@email.com",
"userId":"25",
"userRole":"User"
}
});
$(".ui-icon-plus").hide();
$("#json-viewer li").each( function () {
$(this).click(function (event) {
$(this).children("ul").toggle();
$(this).children(".ui-icon").toggle();
event.stopPropagation();
});
});
HTML:
<div id="json-viewer"></div>
Требуется библиотека пользовательского интерфейса jQuery для отображения знака плюс/минус, поэтому должно быть что-то вроде этого:
Это в значительной степени основано на этом вопросе SO - я просто добавил скрытие/отображение раздела в основном.
pretty-json
делает именно это и находится под следующей лицензией :
Я не слишком много думаю о лицензии
просто не стесняйтесь делать все, что хотите... :-)
Демо можно посмотреть здесь .
Ник Дикинсон-Уайлд