Estoy buscando una biblioteca de Javascript FOSS para renderizar JSON con la capacidad de colapsar objetos anidados.
Esto será para renderizar en el DOM, por lo que los complementos del navegador no funcionarán. Al igual que http://json.parser.online.fr/beta/
Acabo de batir una suciedad rápida: violín
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>
Requiere la biblioteca jQuery UI para que se muestre el signo más/menos, por lo que debe tener algo como esto:
Esto se basa significativamente en esta pregunta SO : acabo de agregar la sección ocultar/mostrar básicamente.
pretty-json
hace exactamente eso y está bajo la siguiente licencia :
No pienso demasiado en la licencia.
siéntete libre de hacer lo que quieras... :-)
Se puede ver una demostración aquí .
Nick Dickinson Wilde