How 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:

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.

About Peter Kellner

Peter is a software professional specializing in mobile and web technologies. He has also been a Microsoft MVP since 2007. In addition, he's a multi-course video author at Pluralsight. To read more about Peter Kellner and his experience click here. For information about how Peter Kellner might be able to help you with your project click here.

Follow me:


Comments

  1. 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.

  2. Nice formatter… Color coding is excellent.

Follow

Get every new post delivered to your Inbox

Join other followers: