Displaying JSON in your Browser

Posted by Rick Strahl on West-Wind See other posts from West-Wind or by Rick Strahl
Published on Fri, 01 Apr 2011 08:50:52 GMT Indexed on 2011/06/20 16:23 UTC
Read the original article Hit count: 732

Filed under:
|

Do you work with AJAX requests a lot and need to quickly check URLs for JSON results? Then you probably know that it’s a fairly big hassle to examine JSON results directly in the browser. Yes, you can use FireBug or Fiddler which work pretty well for actual AJAX requests, but if you just fire off a URL for quick testing in the browser you usually get hit by the Save As dialog and the download manager, followed by having to open the saved document in a text editor in FireFox.

Enter JSONView which allows you to simply display JSON results directly in the browser. For example, imagine I have a URL like this:

http://localhost/westwindwebtoolkitweb/RestService.ashx?Method=ReturnObject&format=json&Name1=Rick&Name2=John&date=12/30/2010

typed directly into the browser and that that returns a complex JSON object. With JSONView the result looks like this:

JsonViewBrowser

No fuss, no muss. It just works. Here the result is an array of Person objects that contain additional address child objects displayed right in the browser.

JSONView basically adds content type checking for application/json results and when it finds a JSON result takes over the rendering and formats the display in the browser. Note that it re-formats the raw JSON as well for a nicer display view along with collapsible regions for objects. You can still use View Source to see the raw JSON string returned.

For me this is a huge time-saver. As I work with AJAX result data using GET and REST style URLs quite a bit it’s a big timesaver. To quickly and easily display JSON is a key feature in my development day and JSONView for all its simplicity fits that bill for me. If you’re doing AJAX development and you often review URL based JSON results do yourself a favor and pick up a copy of JSONView.

Other Browsers

JSONView works only with FireFox – what about other browsers?

Chrome
Chrome actually displays raw JSON responses as plain text without any plug-ins. There’s no plug-in or configuration needed, it just works, although you won’t get any fancy formatting.

[updated from comments]
There’s also a port of JSONView available for Chrome from here:

https://chrome.google.com/webstore/detail/chklaanhfefbnpoihckbnefhakgolnmc

It looks like it works just about the same as the JSONView plug-in for FireFox. Thanks for all that pointed this out…

Internet Explorer
Internet Explorer probably has the worst response to JSON encoded content: It displays an error page as it apparently tries to render JSON as XML:

IeJson

Yeah that seems real smart – rendering JSON as an XML document. WTF? To get at the actual JSON output, you can use View Source.

To get IE to display JSON directly as text you can add a Mime type mapping in the registry:

 JsonRegistry

Create a new application/json key in:

  • HKEY_CLASSES_ROOT\MIME\Database\ContentType\application/json
  • Add a string value of CLSID with a value of {25336920-03F9-11cf-8FD0-00AA00686F13}
  • Add a DWORD value of Encoding with a value of 80000

I can’t take credit for this tip – found it here first on Sky Sander’s Blog. Note that the CLSID can be used for just about any type of text data you want to display as plain text in the IE. It’s the in-place display mechanism and it should work for most text content. For example it might also be useful for looking at CSS and JS files inside of the browser instead of downloading those documents as well.

© Rick Strahl, West Wind Technologies, 2005-2011
Posted in ASP.NET  AJAX  
kick it on DotNetKicks.com

© West-Wind or respective owner

Related posts about ASP.NET

Related posts about AJAX