json-browse
Version:
jQuery plugin to easily browse and highlight your JSON
77 lines (72 loc) • 1.94 kB
HTML
<html>
<head>
<title>jQuery json-browse</title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="json-browse/jquery.json-browse.js"></script>
<link href="json-browse/jquery.json-browse.css" type="text/css" rel="stylesheet" />
<style type="text/css">
body {
margin: 0 100px;
font-family: sans-serif;
}
textarea#json-input {
width: 100%;
height: 200px;
}
pre#json-renderer {
border: 1px solid #aaa;
padding: 0.5em 1.5em;
}
</style>
<script>
$(function() {
$('#btn-json-browse').click(function() {
try {
var input = eval('(' + $('#json-input').val() + ')');
}
catch (error) {
return alert("Cannot eval JSON: " + error);
}
var options = {
collapsed: $('#collapsed').is(':checked'),
withQuotes: $('#with-quotes').is(':checked')
};
$('#json-renderer').jsonBrowse(input, options);
});
// Display JSON sample on load
$('#btn-json-browse').click();
});
</script>
</head>
<body>
<h1><a href="https://github.com/acidjazz/json-browse">json-browse</a></h1>
<textarea id="json-input" autocomplete="off">
{
"id": 1001,
"type": "donut",
"name": "Cake",
"description": "http://en.wikipedia.org/wiki/Doughnut",
"price": 2.55,
"available": {
store: 42,
warehouse: 600
},
"topping": [
{ "id": 5001, "type": "None" },
{ "id": 5002, "type": "Glazed" },
{ "id": 5005, "type": "Sugar" },
{ "id": 5003, "type": "Chocolate" },
{ "id": 5004, "type": "Maple" }
]
}</textarea>
<p>
Options:
<label><input type="checkbox" id="collapsed" />Collapse nodes</label>
<label><input type="checkbox" id="with-quotes" />Keys with quotes</label>
</p>
<button id="btn-json-browse" title="run jsonBrowse()">Transform to HTML</button>
<pre id="json-renderer" class="json-body"></pre>
</body>
</html>