Click here to Skip to main content
12,890,424 members (57,499 online)
Click here to Skip to main content
Add your own
alternative version


27 bookmarked
Posted 1 Aug 2013

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.


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();
	Dictionary<string,> dic = js.Deserialize<dictionary<string,>>(txtInput.Text);
	TreeNode rootNode = new TreeNode("Root");
	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);
			dictionary = (Dictionary<string,>)item.Value;
			BuildTree(dictionary, parentNode);
		catch (InvalidCastException dicE) {
				ArrayList list = (ArrayList)item.Value;
				foreach (string value in list)
					TreeNode finalNode = new TreeNode(value);
					finalNode.ForeColor = Color.Blue;
			catch (InvalidCastException ex)
				TreeNode finalNode = new TreeNode(item.Value.ToString());
				finalNode.ForeColor = Color.Blue;

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


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


About the Author

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

You may also be interested in...

Comments and Discussions

QuestionException in the Program, when i place this json the program give exception Pin
Member 1245526514-May-16 4:46
memberMember 1245526514-May-16 4:46 
GeneralMy vote of 5 Pin
sharkcomp2-Nov-15 5:17
membersharkcomp2-Nov-15 5:17 
AnswerMessage Automatically Removed Pin
25-Sep-15 0:34
memberMember 1201109925-Sep-15 0:34 
NewsMessage Automatically Removed Pin
26-Nov-14 20:38
memberJames Malvi26-Nov-14 20:38 
QuestionWPF Version of BuildTree Method Pin
BSalita17-Aug-14 0:54
memberBSalita17-Aug-14 0:54 
QuestionError Decoding JSON Data Pin
Graeme_Grant4-Aug-13 1:09
memberGraeme_Grant4-Aug-13 1:09 
AnswerRe: Error Decoding JSON Data Pin
Syed M Hussain4-Aug-13 3:39
memberSyed M Hussain4-Aug-13 3:39 
GeneralRe: Error Decoding JSON Data Pin
Graeme_Grant4-Aug-13 12:15
memberGraeme_Grant4-Aug-13 12:15 
GeneralMy vote of 5 Pin
Weerayut Teja3-Aug-13 17:37
memberWeerayut Teja3-Aug-13 17:37 
GeneralMy vote of 5 Pin
newton.saber2-Aug-13 10:10
membernewton.saber2-Aug-13 10:10 

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

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

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