Contact   •   Products   •   Search

Rick Strahl's Web Log

Wind, waves, code and everything in between...
ASP.NET • C# • HTML5 • JavaScript • AngularJs

Displaying JSON in your Browser


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.

Make Donation
Posted in ASP.NET  AJAX  


Feedback for this Post

 
# re: Displaying JSON in your Browser
by Elijah Manor April 01, 2011 @ 5:36am
Nice post. There is also an unofficial JSONView for Chrome as well that does some additional formatting

https://chrome.google.com/webstore/detail/chklaanhfefbnpoihckbnefhakgolnmc
# re: Displaying JSON in your Browser
by charan October 30, 2013 @ 7:44am
Do we need to add this registry key in all the client machines or just the server. if it is on the client machine how can we add it in all the clients whoever is browsing this application.
 


West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2014