Binding JSON data to a LongListSelector

Pre requisite (Part 1) of this article was published here: Deserialize Json data using Newtonsoft Json.NET library

If you have successfully parsed your JSON data from a local/hosted file or read data from a server, now you need to show it to the user. To do use we use the concept of DataBinding.

What is DataBinding?

According to MSDN, Data binding is the process that establishes a connection between the application UI and business logic. If the binding has the correct settings and the data provides the proper notifications, then, when the data changes its value, the elements that are bound to the data reflect changes automatically. Data binding can also mean that if an outer representation of the data in an element changes, then the underlying data can be automatically updated to reflect the change. For example, if the user edits the value in a TextBox element, the underlying data value is automatically updated to reflect that change.

Now let’s see a practical example to show this feature. We will continue with the app from previous post – Deserialize Json data using Newtonsoft Json.NET library


 

1. a. Creating a template

The first step is to create a general template to show the data. Let’s take a look at our sample JSON dat
a used in the app. Now for a simple template, let’s assume we need to show all 5 types of information form the Json data. Let’s create a StackPanel for each information tag like this.
This results in the following format:SP1

1. b. Creating a Template

Let’s use the same style for all the tags and create a unified StackPanel containing 5 such smaller StackPanel.This is what our template looks like now:

SP2

2. Creating a LongListSelector with a DataTemplate

Now we need to show multiple objects from the JSON, we will create a LongListSelector and provide it with a DataTemplate (which the above StackPanel we created!) to show our JSON. The following code does the magic:
The result looks like a empty StackPanel but don’t worry everything is still there and it’s fine.

3. DataBinding

This the important step. We need to careful to bind correct elements to correct UI elements.  We need to bind the LongListSelector with the name of object in RootObject class. Our classes are these:
Thus we need to bind, LongListSelector with mydata from line 12. Please be careful as to make sure to bind the RootObject with the LongListSelector. And then we bind the various tags like id, name, location etc to respective variable of class mydataYou can see the binding syntax from the code snippet below:
Please take a moment to observe various Data Bindings carefully before proceeding.

4. Set the DataContext of LongListerSelector to parsed JSON

This is the final step. After parsing the JSON data, set the DataContext of LongListSelector to your parsed JSON data like:

Feel free to be creative with the DataTemplate you create. You can now use this knowledge to download Json files from servers to create a dynamic app, use some web APIs to exchange Json data and make an awesome app.

And you’re done! This is what final result looks like:

wp_ss_20150304_0004

 

 

 

 

 

 

 

 

 

 

 

Download source code from Github

 

Visit my personal website chauhanvaibhav.net

Deserialize Json data using Newtonsoft Json.NET library

As we learn to make more and more advanced apps, we need more tools in out kitty to make an amazing app. Local apps work great but they can only do so much. Exchanging data from a server or web service is very essential to make a dynamic and constantly updated app. Let’s see how to work with Json in Windows Phone 8 app using the Json.NET library.

What is JSON?

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition – December 1999.

What is Json.NET library?

Json.NET is most popular, free and open source library to work with Json in Windows Phone or Windows apps. In this example, we will be learning how to parse Json data and store it in a variable which can be later used to bind that data to the UI elements such as a ListBox or LongListSelector
Let’s get started. I’ll be making a sample project with 1 style of Json and its parsing. But for the article I’ll be writing about one style, rest of the styles can be seen in the source code shared at the end of the article. Also, I won’t be covering DataBinding in this post, I shall cover that in a separate post. For the time being, the Json data is stored in a local text file stored in assets folder.

1. Adding Json.NET to your app

Go to the Nuget Package manager and search for Json.NET and add the Json.NET library to your project.

Nuget Package Manager
Adding Newtonsoft Json.NET

2. Add the following namespaces to your project

3. Convert the Json data into classes

To convert any Json data into it’s relevant classes, simple go to Json2Csharp and paste your data and this website will give you all the necessary classes. Or alternatively, yon can use the Visual Studio’s in built feature of Paste Json as Class feature from Edit -> Paste Special menu. This is my sample Json data used for this project:

Let’s understand what this data is, I’d suggest doing a search to understand the basic format of JSON data if you don’t already know. This is a object, mydata which is an array of objects. The objects in the array are all alike have 5 tags with different values in each object.

This is what the classes look like after converting the data into classes using Json2Csharp, don’t forget to paste these classes in you .cs file:

Now let’s take a moment to understand what these classes really mean. First class, MyData maps the object in the mydata array in our Json file. You can see the that this class has 5 variables with the same name as the our Json Objects in the mydata array. Second class, RootObject contains a list of class MyData, that means it acts like the array mydata as seen in our sample Json file. This RootObject is the container in which we will deserialize then Json data. It’ll then be a List of Json objects which we can use anyway we like. [DataBinding being a great use, which I will cover in another post.]

4. Read the Json data in a string

Since our file is locally hosted, we are simply reading the contents of the text file in a string using this function:
This function is called like this:

5. Deserialize

The final step.

Let’s see how and what really happened in the second statement(line 5). We created an object obj of class RootObject and then called DeserializeObject function for JsonConvert class and passed the variable containing our Json data as the parameter. That’s it and this data is now ready to be used in anyway you like. I’ll be making a tutorial on using this data with a DataBound LongListSelector soon.

Download source code from Github

Visit my website at chauhanvaibhav.net