How To View JSON in a Pretty Way

Posted by Peter Kellner on November 06, 2009 · 2 mins read

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:

image

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:

image

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:

image

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

 

image

IMHO, much cleaner, shows me the data both before and after, as well as colorizes it which always makes me happy.