Home > Uncategorized > Consuming JSON data with Silverlight

Consuming JSON data with Silverlight

December 19, 2007

How would I use JSON data with Silverlight?

I’ve been asked this a few times and it happened again today.  So tonight is the night to write a quick tutorial on how easy it is to do this.  You can start from scratch or from any Silverlight 1.0 template, but I will be walking through the steps using Visual Studio 2008.

First step is to create the project.

File -> New -> WebSite... -> Silverlight Script Web

Now we need some JSON data. I’m going to grab the latest posts from Twitter using their simple and sweet API.  All I need to do is add a reference to the API and add a callback function to be called once the data has been received.  In the project template, I placed this line below the script block that contains the createObjectEx function.

<script type="text/javascript" src="http://twitter.com/statuses/public_timeline.json?callback=twitterCallback"></script>

Now to handle the loading of the data.  Within the script block containing the createObjectEx function, we first define a couple of global variables at the top.  twitterData is used to store the JSON data and scene will act as a reference to our Silverlight Application class.

var twitterData;   
var scene;

Modify the Silverlight class constructor to use the newly declared scene variable by removing the var from the line below.

var scene = new YourProjectName.Scene();

Next, add the twitterCallback function.

function twitterCallback(obj)
     twitterData = obj;

Now open up you Silverlight application class file.  In the project template, the default name is Scene.js.

  • Remove all of the functions except for the handleLoad function.
  • Within the handleLoad function, remove the sample event hookup code so you are left with the plugIn definition line.
  • In the handleLoad function, add a property for the rootElement:

this.root = rootElement;

  • Add the new loadData function defined below (make sure you leave a comma between handleLoad and loadData function definitions):

loadData: function(){
     var item;
          item = this.plugIn.content.createFromXaml('<Canvas><Image Source="' + twitterData[i].user.profile_image_url + '" /><TextBlock Canvas.Left="54">' + twitterData[i].user.name + '</TextBlock></Canvas>');
          item["Canvas.Top"] = i*54;

The above function loops through the first 5 posts and creates a new Silverlight object for each one using their name and profile image. createFromXaml is the magic function which takes a string, parses it and returns an object.  The string could come from anywhere, often a separate .xaml file accessed via a downloader object.  Once the object is made the top position is based of the index, which causes the items to be vertically stacked.  Then the new object is added to the this.root which is a reference to the main Canvas defined in the handleLoad function above.

Now the last step is to open up the Scene.xaml file and remove all of the lines except for the outermost Canvas element.

And that’s it!  Seriously, hit F5, run your project and you should see something like this:

Now enjoy and run with it.  Hopefully this short tutorial will help you in your quest to create JSON-based Silverlight applications or at least a new Silverlight-based Twitter widget.

%d bloggers like this: