November 6th, 2009How To View JSON in a Pretty Way
Cutting to the chase, I choose Vladimir Bodurov’s Color Formatter!
For the past year or so, I’ve been working on a project that uses Microsoft’s ASP.NET MVC for providing data to our pure JavaScript application. That is, there are no web forms, no dynamic HTML generation, just 100% JavaScript running on the client. I’m using a library called ExtJS which gives us high quality “forms like” user interactions and MVC for getting the data. That is, the Application looks like this:
The data retrieval URL used by the JavaScript look like:
http://www.mycompany.com/data/Company/Get
And, the JSON that comes back using either FireBug or Fiddler looks like this:
Problem is that it’s hard to read the JSON data. Firebug does a reasonable job of formatting, but it’s still not perfect. Up until now, the way I always have formatted the data is to type into bing or Google “format json” and the first reasonable choice has been http://jsonformat.com/. Cutting and pasting my data into it shows:
However, my new favorite JSON Formatter makes the data look like this:
( http://www.bodurov.com/JsonFormatter/ )
(more information at: http://blog.bodurov.com/Formatter-and-colorer-of-raw-JSON-code)
And, it’s available as simple html you can run on your own server here at codeplex:
http://www.codeplex.com/QuickJsonFormatter/Release/ProjectReleases.aspx?ReleaseId=10136
IMHO, much cleaner, shows me the data both before and after, as well as colorizes it which always makes me happy.









November 6th, 2009 at 10:24 pm
Nice formatter… Color coding is excellent.
May 19th, 2010 at 7:43 am
Well this certainly works. Also I looked “under the bonet”. Very old-fashioned javascript, globals, no closure, etc. jQuery would certainly streamline a lot of code inside. As also will: ECMA Script 5 objects detection and usage if present. Of which most obvious omission is not using native JSON object, if available. Which in turn does much better JSON syntax check than simple: eval(“[" + json + "]“), currently “in there”… CSS also leaves much space for improvement.
But certainly this works very well for a lot of people.