
Yet another jQuery JSON viewer plugin which renders JSON objects in HTML with support for syntax highlighting and collapsible/expendable navigation.
See also:
How to use it:
1. Load the required jquery.json-viewer.css
for the basic styles of the JSON viewer.
<link href="jquery.json-viewer.css" rel="stylesheet">
2. Load the jQuery JSON Viewer's script after you've have jQuery library installed.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="jquery.json-viewer.js"></script>
3. Create an container element for the JSON viewer.
<pre id="json-viwer"></pre>
4. Prepare your JSON data and the plugin will take them as input which will be converted into html and added into the container element you just created.
$('#json-viewer').json_viewer(input);
5. Collapse all nodes on init.
$('#json-viewer').jsonViewer(input, { collapsed: true });
6. All JSON keys are surrounded with double quotation marks. Default: false.
$('#json-viewer').jsonViewer(input, { withQuotes: false });
7. Make the valid links clickable. Default: true.
$('#json-viewer').jsonViewer(input, { withLinks: false });
Changelog:
2019-03-10
2017-03-22
- Fixed Arrow Size Issue
2016-10-01
- js update
2016-04-27
- Added withQuotes option
2016-02-17
- Added option for collapsing all node on init
2015-04-03
- Escape XML/HTML tags in JSON content
2015-02-21
- Made dict key names clickable
2014-12-25
- Toggle block when placeholder is clicked, use 'em' instead of 'px' in CSS
This awesome jQuery plugin is developed by abodelot. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 10.03.2019
- Source