Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Parse JSON to C# in WinRT, Silverlight, WPF, Windows Phone

, 5 Apr 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
How to parse JSON to C# in WinRT, Silverlight, WPF, Windows Phone.

Introduction

I have never worked with JSON before. But due to security limitations it’s the only simple way to get Twitter data in Silverlight. So I decided to do the same sample application for WinRT, Silverlight, WPF and Windows Phone platforms. As usual, there are many different ways to do the same thing. Jokingly, almost all JSON stuff, included into the box, is different on different platforms. Perhaps MS guys don't like to re-use code. Finally I’ve found the single common thing, which can be used everywhere. It’s System.Runtime.Serialization.Json.DataContractJsonSerializer. In WinPhone and Silverlight 5 applications it is included into the System.Servicemodel.Web assembly, in WPF – into System.Runtime.Serialization, and in WinRT it’s the part of .NET for Windows Store apps.

This sample uses twitter search api 1.0 which doesn’t require any authentication (https://dev.twitter.com/docs/api/1/get/search) .

To work with DataContractJsonSerializer you should generate the set of classes to which your JSON can be deserialized. It might be tricky if you want to do it by yourself. Fortunately, you can use the public service like json2csharp or offline tools like JSON C# Class Generator. They take JSON string and generate the set of c# classes. Then you can copy these classes to your project and use them.

The easiest way to get JSON string is to download it using the same uri which you are planning to use in your application. In Silverlight you can use WebClient.DownloadStringAsync:

var client = new WebClient();
client.DownloadStringCompleted += (sender, args) =>
     {
          string json = args.Result;
     };
client.DownloadStringAsync(new Uri(yourUri));

My search uri looks like this one: http://search.twitter.com/search.json?q=from:ComponentOne&rpp=20&include_entities=true

Twitter returns quite long JSON string for my query, I won’t post it here. Just copy the string and ask json2csharp to convert it. For my case it gave me the next set of classes:

public class Hashtag
{
    public string text { get; set; }
    public List<int> indices { get; set; }
}

public class Url
{
    public string url { get; set; }
    public string expanded_url { get; set; }
    public string display_url { get; set; }
    public List<int> indices { get; set; }
}

public class Entities
{
    public List<Hashtag> hashtags { get; set; }
    public List<Url> urls { get; set; }
    public List<object> user_mentions { get; set; }
}

public class Metadata
{
    public string result_type { get; set; }
}

public class Result
{
    public string created_at { get; set; }
    public Entities entities { get; set; }
    public string from_user { get; set; }
    public int from_user_id { get; set; }
    public string from_user_id_str { get; set; }
    public string from_user_name { get; set; }
    public object geo { get; set; }
    public object id { get; set; }
    public string id_str { get; set; }
    public string iso_language_code { get; set; }
    public Metadata metadata { get; set; }
    public string profile_image_url { get; set; }
    public string profile_image_url_https { get; set; }
    public string source { get; set; }
    public string text { get; set; }
    public object to_user { get; set; }
    public int to_user_id { get; set; }
    public string to_user_id_str { get; set; }
    public object to_user_name { get; set; }
}

public class RootObject
{
    public double completed_in { get; set; }
    public long max_id { get; set; }
    public string max_id_str { get; set; }
    public int page { get; set; }
    public string query { get; set; }
    public string refresh_url { get; set; }
    public List<Result> results { get; set; }
    public int results_per_page { get; set; }
    public int since_id { get; set; }
    public string since_id_str { get; set; }
}

Believe or not, it was the most complicated part. Note, if some part of returned JSON is empty, for example, there is no any data for urls in the entities, code generation tools will not create Url class and will use object type instead. In such case you won’t be able to parse urls. So, check such things and try to get different JSON which contains needed data.

You can use above classes directly, but I decided to use them for parsing only. Returned JSON might change upon service developers decision, I don’t want to change my XAML every time. So, in my samples I use really simple class to represent twitter item:

public class TwitterItem
{
    public DateTime PublishDate { get; set; }
    public string Handle { get; set; }
    public string Title { get; set; }
    public string Link { get; set; }
}

And the last peace of work to get real data from server. Here is Silverlight version (the same exact code can be shared for WPF and Windows Phone platforms):

/// <summary>
/// Searches and gets the index of the first older item already in the list
/// </summary>
/// <param name="date">The date of the item being compared to the list</param>
/// <returns>The index of the first oldest item, otherwise the number of items in the list</returns>
public static int GetFirstIndexOfOlderTwitterItem(DateTime date, ObservableCollection<TwitterItem> tItems)
{
    if (tItems.Count > 0)
    {
        TwitterItem tfi = tItems.FirstOrDefault(d => d.PublishDate < date);
        if (tfi == null)
            return tItems.Count;
        else
            return tItems.IndexOf(tfi);
    }
    else
    {
        return 0;
    }
}

/// <summary>
/// Loads twitter items into the specified control.
/// </summary>
/// <param name="uri">The uri to load twitter data.</param>
/// <param name="control">If set, method uses it to load photos only with this specific tag.</param>
public static void Load(string uri, Control control)
{
    ObservableCollection<TwitterItem> result = new ObservableCollection<TwitterItem>();
    var client = new WebClient();

    client.OpenReadCompleted += (s, e) =>
        {
            #region ** parse twitter data
            using (System.IO.Stream stream = e.Result)
            {
                // parse Json data
                DataContractJsonSerializer rootSer = new DataContractJsonSerializer(typeof(RootObject));

                RootObject root = (RootObject)rootSer.ReadObject(stream);
                foreach (Result res in root.results)
                {
                    TwitterItem ti = new TwitterItem();
                    ti.Title = res.text;
                    DateTimeOffset dateOffset;
                    if (DateTimeOffset.TryParse(res.created_at, out dateOffset))
                    {
                        ti.PublishDate = dateOffset.UtcDateTime;
                    }
                    ti.Handle = res.from_user;
                    if (res.entities.urls != null && res.entities.urls.Count > 0)
                    {
                        ti.Link = res.entities.urls[0].url;
                    }
                    result.Insert(GetFirstIndexOfOlderTwitterItem(ti.PublishDate, result), ti);
                }
                if (control is ItemsControl)
                {
                    ((ItemsControl)control).ItemsSource = result;
                }
            }
            #endregion
        };
    client.OpenReadAsync(new Uri(uri));
}

And a bit different code for WinRT platform:

/// <summary>
/// Loads twits.
/// </summary>
/// <param name="uri">The uri to load twitter data.</param>
/// <returns></returns>
public static async Task<ObservableCollection<TwitterItem>> Load(string uri)
{
    ObservableCollection<TwitterItem> result = new ObservableCollection<TwitterItem>();
    try
    {
        var client = WebRequest.CreateHttp(uri);
        var response = await client.GetResponseAsync();

        #region ** parse twitter data
        using (System.IO.Stream stream = response.GetResponseStream())
        {
            // parse Json data
            DataContractJsonSerializer rootSer = new DataContractJsonSerializer(typeof(RootObject));

            RootObject root = (RootObject)rootSer.ReadObject(stream);
            foreach (Result res in root.results)
            {
                TwitterItem ti = new TwitterItem();
                ti.Title = res.text;
                DateTimeOffset dateOffset;
                if (DateTimeOffset.TryParse(res.created_at, out dateOffset))
                {
                    ti.PublishDate = dateOffset.UtcDateTime;
                }
                ti.Handle = res.from_user;
                if (res.entities.urls != null && res.entities.urls.Count > 0)
                {
                    ti.Link = res.entities.urls[0].url;
                }
                result.Insert(GetFirstIndexOfOlderTwitterItem(ti.PublishDate, result), ti);
            }
        }
        #endregion
    }
    catch
    {
    }
    return result;
}

Thanks to people who keep posting on http://stackoverflow.com/, most of the problems got solved after reading answers.

History

  • 15 Feb 2013 - First published.
  • 5 Apr 2013 - Added working Silverlight sample showing results in the ListBox.

License

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

Share

About the Author

Irina Pykhova
Program Manager ComponentOne
Russian Federation Russian Federation
I'm the ComponentOne program manager for XAML stack (WPF, WINRT, Silverlight, Windows Phone).
If you need more info, learn about our products here: http://www.componentone.com/
Follow on   LinkedIn

Comments and Discussions

 
QuestionIntegrating in windows phone Pinmembersyed fraz ali4-Apr-13 12:14 
AnswerRe: Integrating in windows phone PinmemberIrina Pykhova5-Apr-13 5:54 
QuestionAPI 1.1 PinmemberMember 96319492-Mar-13 9:54 
AnswerRe: API 1.1 PinmemberIrina Pykhova2-Mar-13 10:06 
not now. They still promiss to add the simpler version of application-only authentication, so perhaps, I'll wait for more information about that.
I bookmarked 2 good articles about OAuth, might be useful for you:
Twitter OAuth authentication using .NET
TwitterRT - The Design
GeneralRe: API 1.1 PinmemberMember 96319492-Mar-13 11:44 
AnswerRe: API 1.1 PinprofessionalIrina Pykhova12-Jul-13 1:48 
QuestionThe source code for the Class Generator PinmemberDewey15-Feb-13 16:52 
GeneralRe: The source code for the Class Generator PinmemberIrina Pykhova16-Feb-13 1:09 

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
Web02 | 2.8.1411019.1 | Last Updated 5 Apr 2013
Article Copyright 2013 by Irina Pykhova
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid