This time I will share jQuery Plugin and tutorial about Tiny jQuery Plugin For Pretty JSON Print – JSON Browse, hope it will help you in programming stack.
Yet another JSON viewer jQuery plugin which presents your JSON data in a more readable, expandable tree structure with syntax highlighting support.
How to use it:
1. Add references to jQuery library and the jQuery JSON Browse plugin’s files into the html page.
1 |
<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script> |
2 |
<script src="jquery.json-browse.js"></script> |
3 |
<link href="jquery.json-browse.css"rel="stylesheet"> |
2. Create a ‘pre’ element where to place the pretty JSON data.
1 |
<pre id="json-renderer" class="json-body"></pre> |
3. Call the function on the ‘pre’ element to beautify your custom JSON data.
5 |
$('#json-renderer').jsonBrowse(input); |
4. The option to collapse all child nodes on page load.
1 |
$('#json-renderer').jsonBrowse(input,{ |
5. The option to surround all JSON keys with double quotation marks.
1 |
$('#json-renderer').jsonBrowse(input,{ |
This awesome jQuery plugin is developed by acidjazz. For more Advanced Usages, please check the demo page or visit the official website.
