Scripts

JSON Painter

Last Update
29 August 2013
Regular License
$5
Extended License
$25
Sales
1

If you have ever had a need to read a raw JSON string, you probably noticed that it aint that much human-readable…

What is JSON painter? This simple jQuery plugin will reformat and colorize any valid JSON, and you eyes will be forever gratefull for it

Here are the highlighs:

Formats the JSON Syntax highlight Open / close individual object whitin

One js file (3.1Kb) + one line of code Handles both JSON strings and objects Customize the style via CSS to fit your needs

See it in action I beleive that there is no need to describe this plugin in more details, but if you are intrigued – here is a online demo with code snippets.

The How to guide Step 1: Download the script and place wherever you place the java scripts.

Step 2: Include the jQuery and the JSON painter script in the <head> tag of your document, like this: <head> <!-- additional header content -->

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js" charset="utf-8"></script> <script type="text/javascript" src="jquery.jsonPainter-1.0.js" charset="utf-8"></script> </head>

Note that if you already have jQuery plugin included, you do not need to include it twice.

Step 3: Create an element in the document that will hold the painted JSON <div id="json"></div>

Step 4: Have fun <script type="text/javascript">

// Transform the data within the element (no params passed) $('#json').jsonPainter();

// Show painted JSON from a atring var str = '{ node: "value", list: [ 1, 3, 4 ] }'; $('#json').jsonPainter(str);

// Show painter JSON from an object var obj = { node: "value", list: [ 1, 3, 4 ] }; $('#json').jsonPainter(obg); </script>

Step 5: If you are familiar with CSS, you can easily define your own styles. Simply customize the snipper below add it to the <head> tag of your HTML document. <style>

/** Define gloval style, like font size and family */ jsonpainter { }

/** Define how the key will be show */ jsonpainter-key { }

/** Define style for each variable type */ jsonpainter-value { } jsonpainter-value-url { } jsonpainter-value-null { } jsonpainter-value-number { } jsonpainter-value-string { } jsonpainter-value-boolean { } jsonpainter-value-boolean-true { } jsonpainter-value-boolean-false { }

</style>