Introduction

This article describes a JSON data visualizer for popular Web Services like Google, Yahoo!, Bing, and Twitter using jQuery, JavaScript, and ASP.NET MVC 2.0.

Background

Popular Web Services like Google, Yahoo!, Bing, and Twitter return JSON (JavaScript Object Notation) for web applications due to the compact data structure of JSON. When I started developing a mash up application using JSON data, I ran into problems hooking up the data to my web pages because of my lack of understanding of the returned data structure. Hence, I developed this JSON Visualizer, which has been very useful for me to understand the data structure. This analyzer helped me to change the parameters easily and test my REST (Representational State Transfer) calls before designing the application. I hope this would be of similar use to someone.

The data visualizer presents data in the following formats:

RawData option renders raw JSON data returned by a Web Service without any processing.

Table option renders JSON data in a nice table format. I have used a JavaScript program called prettyPrint for JavaScript by James Podesly to render this table data.

Class output option is my own experimental software to traverse the data. For this, I developed a recursive iteration routine inspired by the article: Show Object Properties by Matt Holthe.

Output

The initial page looks like the image shown below. A live demo is available at this site: Json_Demo.

When the page gets loaded, the drop down box gets loaded with the search engine names. The parameters also change with the search engine selection. These parameters are hard coded in a JavaScript object, and can be changed easily in code.

The raw data format output is given below. This is sometimes useful, especially when errors are returned and also in debugging this software.

The table format output is given below. This is very powerful. Data is represented in a hierarchical format. You can dig through the structure by clicking on the depth reached.

The table format with depth expanded output is given below:

The beautify view is given below. This is useful when you want to look at the general structure and also when you want to print the results. You have to cut and paste the output to a Word document and print it since I have not included a print option in this version of the software.

The class view given below. This I found useful when I wanted to traverse through the array to pick up a particular object.

Code Description

Setup

You need Visual Studio 2010 to use this project. You also need some knowledge of jQuery, JavaScript, and MVC 2.0 to follow this discussion.

When you start a new project as an ASP.NET MVC 2.0 Application (in Visual Studio 2010), it creates a home controller with Home and About views. Visual Studio also automatically loads a script folder with jQuery-1.4-1.js. I updated jQuery to version 1.4-2. I also created a custom folder in the Scripts folder to hold unique scripts of this application. The unique scripts are:

With this code, we are building a URI using the url1 supplied (which depends on the search engine), app ID, and the parameter. Please note that you have to get your own app ID from Bing and Yahoo!. I have not used the app ID for Google, though they recommend using one. Please also note that the returned data is in JSON format.

The control's DIV has the drop down select box for the select engine and the buttons. I have used a DIV for each type of data presented to keep the view simple. The paramselect1.js JavaScript file loads the selection box, parameters, gets the data, and displays them. Let me describe the various functions.

Search Engine Selection Box

Search_engines1 has the URL engine and the parameter information specific to each search engine. This can be modified to add new search engines or new parameters.

Get_Engine_Data Function

The Get_Engine_Data(divname) function has the DIV name passed in as a parameter. It uses this along with the selected engine's parameter value to build the request to the JSON Controller and does a jQuery to get the JSON data. Then it calls the displayresult function.

displayresult Function

displayresult(result, divname, selecteditems) uses the JSON result, DIV name and the selected items to build the view.

If raw data is requested, it is appended to the rawdatadiv.

If table data is requested, we parse the JSON using jQuery parseJSON and call prettyPrint. The resulting table is appended to the tablediv.

If beautify result is requested, we call the beautifyresult function. The beautifyresult function sets the parameters required for the beautify.js function, calls it, and adds it to the TextArea. We also need to show the beautifydiv because it has the text area to which the beautify data is output.

If class result is requested, we do a parseJSON on the result and call the BuildTree function which is described later.

Buildtree Function

The BuildTree function takes three parameters and has recursion. Before calling it, you also have to set up an array called folderarray. The function looks at the object and depending on whether it is the parent or object or array, builds each item and appends it to JsonListdiv. The levelcount keeps track of the level, and folderarray keeps track of the name of the parent.

Points of Interest

JSON format is a compact format to get data from various Web Services. The JSON Visualizer described here has been useful to me for understanding the data structure to develop my projects. I hope it will be useful to you too.

Share

About the Author

Vijay Kumar: Architect, Programmer with expertise and interest in Azure, .net, Silverlight, C#, WCF, MVC, databases and mobile development. Concentrating on Windows Phone 7 and Windows Azure development. Lived in California for many years and done many exciting projects in dotnet and Windows platforms. Moved to Raleigh (RTP), North Carolina recently and available for consulting. Blog http://Silverazure.blogspot.com.