Post
Ask Question

Parsing JSON From Flickr API In A Universal Windows App

In this article, we will learn how to create a Universal Windows Application that can parse a JSON string coming from the API of a particular website. Here, in this article we are using a basic API from Flickr to show all the recent images from Flickr website in the application.
 
For this we need to go to the following link to get the API Url from Flickr for fetching recent photos: Flickr Recent Photo. You can find the API Url at the end of the page after you click "Call Method" button as in the following screenshot:
 
 
 Now, we have our Flickr API and to use this API in our Application, we need to create the respective classes according to the JSON string returned by the API call, so we will go to Json2Csharp.net website and paste the API url and hit "Generate" button. We will get the respective classes which we will be needing to store the object which we will get after deserialization of JSON string. 
 
Now, we have our classes: RootObject, Photos, Photo (These classes may vary with respect to the API which we are using). We will now make our Universal Windows Application (code works for Windows 10, Windows 8.1 Store App)  in Windows 10.
After creating our application, we need to install JSON.NET library from Nuget Package Manager/ Package Manager Console.  After installing the JSON.NET library, we need to add the classes which we will use to save the data after deserializing JSON, so we will add a Class file to the Solution(in my case class name: JsonClasses.cs), then just delete the class and add the classes which we got from Json2Csharp site:
  1. public class Photo  
  2.     {  
  3.         public string id { get; set; }  
  4.         public string owner { get; set; }  
  5.         public string secret { get; set; }  
  6.         public string server { get; set; }  
  7.         public int farm { get; set; }  
  8.         public string title { get; set; }  
  9.         public int ispublic { get; set; }  
  10.         public int isfriend { get; set; }  
  11.         public int isfamily { get; set; }  
  12.     }  
  13.   
  14.     public class Photos  
  15.     {  
  16.         public int page { get; set; }  
  17.         public int pages { get; set; }  
  18.         public int perpage { get; set; }  
  19.         public int total { get; set; }  
  20.         public List<Photo> photo { get; set; }  
  21.     }  
  22.   
  23.     public class RootObject  
  24.     {  
  25.         public Photos photos { get; set; }  
  26.         public string stat { get; set; }  
  27.     }  
Before moving to the coding part to show the Images into our MainPage, we will add the following code for a property returning Uri by converting data of Photo Class to a Uri format which will serve as a source for Image control.  Here's the code:
  1. public Uri ImgUrl  
  2.         {  
  3.             get  
  4.             {  
  5.                 return new Uri(string.Format("http://farm{0}.static.flickr.com/{1}/{2}_{3}.jpg", farm, server, id, secret));  
  6.             }  
  7.         }  
Now, to show the image data, we will add the following code in the XAML file of Main Page of the application :
  1. <GridView x:Name="FlickrGridView" Margin="20,10,10,10" IsItemClickEnabled="True">  
  2.             <GridView.ItemTemplate>  
  3.                 <DataTemplate>  
  4.                     <Image Width="400" Height="400" Source="{Binding ImgUrl}" />  
  5.                 </DataTemplate>  
  6.             </GridView.ItemTemplate>  
  7. </GridView> 
After adding the above code in XAML file, we will move to the .CS file of the Main Page and before adding the code, we need to add the namespace to use JSON.NET library and namespace for utilizing the HttpClient Class:
  1. using Newtonsoft.Json;  
  2. using System.Net.Http;  
Now, we have to deserialize the JSON string response from the API url using Json.net and bind that deserialized data to our Image control in GridView Template in XAML code. Here's the code:
  1. public async void GetImages()  
  2.         {  
  3.             // For the Api Url written below, just get the new Api Url from the flickr api link the blog  
  4.             string provideUri = "https://api.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=aaf0721010d60c8dfdd2df28ed0ac6b9&format=json&nojsoncallback=1&api_sig=ebb3b6eb5686c1c042a9f8b7d4d4cf87";  
  5.   
  6.             HttpClient client = new HttpClient();  
  7.             string jsonstring = await client.GetStringAsync(provideUri);  
  8.             var obj = JsonConvert.DeserializeObject<RootObject>(jsonstring);  
  9.             if (obj.stat == "ok")  
  10.             {  
  11.                 FlickrGridView.ItemsSource = obj.photos.photo;  
  12.             }  
  13.               
  14.         }  
Explanation of code in the method above:
  1.  We used HttpClient class object to get the JSON string from the API url.

  2. In variable "obj" of var type, we saved the deserialized json string as a RootObject Class object. This is because RootObject class is encapsulating other class: Photos which are again encapsulating Photo class. Photo class is the class containing the details of the Image.

  3. In the if condition statement, we are checking whether the Status is "ok". If status is not Ok, no image would be saved in the List and hence not presented in the application.
Now, just call this function in the constructor of MainPage class:
  1. public MainPage()  
  2.         {  
  3.             this.InitializeComponent();  
  4.             GetImages();  
  5.         }  
Now, you can run the code!
 
Note

The Flickr API used is a general API and it's url changes in sometime, so please try to fetch a new url from the link I have provided in the article above for the Flickr API and copy that url into the "provideUri" string.


Similar Articles