Binding Any JSON Data List in Your Application

So you have also spent much of your time in data binding and it has become hectic for you. Do have a JSON data list and you want to bind it in your application? Well, if you need a quick solution you are at very right place, you would not take more than 10 minutes to bind your JSON list to your own application's list box in Windows Phone.

Where to start

Mission 1: Must do before following.

• Get your JSON data (List/Array) in your application.
  
  If you are not familiar with it, you can follow my quick tutorial for this purpose.
  
  
• Mind it that you have created a class for getting the JSON data. "RootObject.cs" in my case.

Mission 2: Create sample data for your JSON data class.

• Open your WindowsPhone project in Blend. Now here the real thing comes, you need to create sample data for the very class of JSON data. How will you create it? Let's have a closer look.
  
  
• Create sample date for that click on the tab of date.
  
  
  
  
• Click on the sample data drop down and select "Create Sample Data from Class".
  
  
  
  
• A menu will open. Now search the JSON data class, "RootObject" in my case.
  
  
  
  
• Select that class and you will see all the sample data created.
  
  
  
  
• Now drag and drop the collection from the Data Tab to the page, it will show you the sample data created according to that class.
  
  

Mission 3: Design the layout.

• For a beautiful representation of your data, design the layout accordingly, you can manage a TextBox and TextBoxes according to your will.
  
  
  
  
• Create your own item template.
  
  
• Use colors to make it catchy.

Mission 4: Binding JSON data with the listbox.

Its time to go back to Visual Studio.

• I have a list of Entries, so to bind it I will use an ObservableCollection of type Entry to bind it to my listbox.
  
  
  
  
• As I have created Obesrvable Collection, now I would iterate the JSON data using foreach loop.
  
  
  
  
• After iteration I set my listbox's data context to that Observable Collection in which I iterated the data.
  
  Note: When the sample data is generated the DataContex is already set to the sample values, don't forget to change it to Obesrvable Collection.
  
  
  
  
• Call JSON data either in the constructor or using a button.
  
  
  
  
  
  
• You are good to go! Run your application and say WOW!

TechNet Article

Thanks for joining us again, see you next time.

Personal Blog: Blend Unleashed.