JSON Viewer

• Download source code - 36.3 KB

Introduction

As an web developer, I'm almost always working with JSON data. Most of the time, I can look at the data and get a good understanding of what's going on, and if needed, I just run it through a JSON decode script usually in PHP. But recently, I was given a large JSON file which was initially an Ajax response from a website. Normally, I would just write a simple script to make the data more readable but after working with the JavaScriptSerializer class in a recent .NET web application, I wondered how difficult it would be to develop a Windows application that could decode JSON data and present it to me in a more meaningful way.

It's been a while since I worked on a Windows Forms application and immediately I ran into a problem. For some reason, I was not able to add a reference to System.Web.Extensions. The Add Reference dialog box didn't list the reference. After some time of head banging and frustration, I realized it was to do with the target framework. My application was targeting the .NET Framework 4 Client Profile. I switched it to use .NET Framework 4 and checked the reference list again. From this moment on, the head banging stopped.

Now that I was able to add the reference, I could use the System.Web.Script.Serialization namespace. Within this namespace is a class called JavaScriptSerializer. It has a Deserialize method, which can deserialize the JSON data to a Type. I used a Dictionary type since JSON can be considered to be a key/value pair where value can also be an array. Listing 1.1 below shows an excerpt of the deserializing process from the sample application.

Listing 1.1

.......
JavaScriptSerializer js = new JavaScriptSerializer();
 
try
{
	Dictionary<string,> dic = js.Deserialize<dictionary<string,>>(txtInput.Text);
 
	TreeNode rootNode = new TreeNode("Root");
	jsonExplorer.Nodes.Add(rootNode);
	BuildTree(dic, rootNode);
}
catch (ArgumentException argE)
{
	MessageBox.Show("JSON data is not valid");
} 

Once I had deserialized the data, I needed a way to show it. For this, I chose to use a TreeView control where a TreeNode could represent both a key and a value. Notice in the code above, I have a method BuildTree(), which accepts a Dictionary object and a TreeNode. This method recursively loops through each item and checks if the value is of Type Dictionary and if it is, it passes the new Dictionary object to itself (BuildTree) with a parent TreeNode.

If the value is not of Type Dictionary, then I check if it is of Type ArrayList and if it is, then I loop through the items and add them as the final TreeNode. Finally, if the value if not of either Dictionary or ArrayList Types, then I assume it is a string and create a final TreeNode. I gave a blue text color to each final TreeNode value to indicate it was not a parent TreeNode.

Listing 1.2 below shows the complete BuildTree method.

Listing 1.2

public void BuildTree(Dictionary<string,> dictionary, TreeNode node)
{
	foreach (KeyValuePair<string,> item in dictionary)
	{
		TreeNode parentNode = new TreeNode(item.Key);
		node.Nodes.Add(parentNode);
 
		try
		{
			dictionary = (Dictionary<string,>)item.Value;
			BuildTree(dictionary, parentNode);
		}
		catch (InvalidCastException dicE) {
			try
			{
				ArrayList list = (ArrayList)item.Value;
				foreach (string value in list)
				{
					TreeNode finalNode = new TreeNode(value);
					finalNode.ForeColor = Color.Blue;
					parentNode.Nodes.Add(finalNode);
				}
				
			}
			catch (InvalidCastException ex)
			{
				TreeNode finalNode = new TreeNode(item.Value.ToString());
				finalNode.ForeColor = Color.Blue;
				parentNode.Nodes.Add(finalNode);
			}
		}
	}
}

The rest of the application is made up of reading a file with the help of the OpenFileDialog class and the System.IO namespace.

History

• 1^st August, 2013: Initial version