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 for the past 7 years. 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.

Your Comments

*

Follow

Get every new post delivered to your Inbox

Join other followers: