strider2038/json-beautify-it

Tools for beautifying JSON data in browser

JSON Beautifier

Set of tools for parsing and beautifying JSON data in browser.

• JavaScript function
• Browser extensions for Chrome and Firefox
• Yii2 Ajax debugger extension

JSONBeautifyIt(selector, [config]) ⇒ Boolean

Function for parsing and beautifying JSON data. To use it just pass selector argument for searching containers with JSON. Function as default will replace text data with beautifully formatted HTML structure.

Example

Source html

<div class="json">{"s":"string","a":[1, 2, 3], "n": null}</div>

Function call

JSONBeautifyIt('.json');

Will be displayed as

Kind: global function

Param	Type	Default	Description
selector	String		Selector for DOM container(s) with source JSON data
[config]	Object		Configuration array
[config.indent]	Number	4	Left indent space length
[config.callback]	function		Callback function. If is defined all process results will be send via it. Callback parameters are: html (generated html code), container (source container with JSON data) and error (boolean value)
[config.uriRegExp]	RegExp	/(https?://[^\s]+)/g	Regular expression for detecting uri links
[config.stylesheetId]	String	"json-beautify-it-stylesheet"	Id for inlined stylesheet
[config.encodeStrings]	Boolean	true	Enables/disables html encoding for strings

Browser extensions for Chrome and Firefox

Chrome and Firefox extensions for beautifying JSON data in AJAX or API responses in browser. You have to manually install it in your browser (not available in web stores right now). All source codes are available here:

• Chrome
• Firefox

To use it open page with AJAX or API response and click on extension icon . After that extension will automatically launch script for beautifiyng JSON.

For example, if you open this link https://maps.google.com/maps/api/geocode/json?address=Moscow and click on extension's icon you will see something like this

Yii2 Ajax debugger extension

There is also debugger extension for Yii2 with automatic beautifying JSON response. You can see details here

Known issues

Numbers in exponential notation will be transformed into simple numeric notation. For example "3e+1" will be displayed as "30".

json-beautify-it's Issues

JSON prefix strip

We are using a prefix before sending back the JSON responses in our API like in the example below:

)]}',
{"data": "wow"}

note that the above prefix is in fact ")]}',\n" but sometimes the white spaces are stripped out and it's only ")]}',"

"Prefixing the JSON string in this manner is used to help prevent JSON Hijacking. The prefix renders the string syntactically invalid as a script so that it cannot be hijacked."

This prefix should be stripped before parsing the string as JSON.

I was wondering if you could extend the service with an update for the above and release it.