Click here to Skip to main content
Click here to Skip to main content

JSON Viewer

, 3 Aug 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
In this article, I explain how I developed a simple JSON data viewer using the System.Web.Extensions.dll and the JavaScriptSerializer class.

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 whats going 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 about 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 it self (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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Syed M Hussain
Web Developer
United Kingdom United Kingdom
No Biography provided

Comments and Discussions

 
NewsThis will help who are looking for online json viewer @CodeBeautify.org PinmemberJames Malvi26-Nov-14 21:38 
QuestionWPF Version of BuildTree Method PinmemberBSalita17-Aug-14 1:54 
QuestionError Decoding JSON Data PinmemberGraeme_Grant4-Aug-13 2:09 
AnswerRe: Error Decoding JSON Data PinmemberSyed M Hussain4-Aug-13 4:39 
GeneralRe: Error Decoding JSON Data PinmemberGraeme_Grant4-Aug-13 13:15 
GeneralMy vote of 5 PinmemberWeerayut Teja3-Aug-13 18:37 
GeneralMy vote of 5 Pinmembernewton.saber2-Aug-13 11:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141220.1 | Last Updated 3 Aug 2013
Article Copyright 2013 by Syed M Hussain
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid