Parsing JSON from Flickr Api in a Universal Windows App

In this article, we will learn how to create an Universal Windows Application which 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 like in the image below:
flickrImg
Now, we have our Flickr Api and to use this Api in our Application, we need to create the respective classes as according to the JSON string returned by the Api call. So, we will go Json2Csharp.net website and paste the api url and hit “Generate” button. We will get the respective classes which we will be needing to use to store the object which we will get after deserialization of Json String.
Now, we have our classes as: 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:
Before moving to the coding 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.  The code is below:
Now, to show the image data, we will add the following code in the XAML file of Main Page of application :
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:
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. The code is as follows:
Explanation to code in the method above:
1. We used HttpClient class object to get the json string from the api url.
2. In varible “obj” of var type, we saved the deserialized json string as a RootObject Class object. This is because RootObject class is the encapsulating other class: Photos which is 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:
Now, you can run the code!
Note: The Flickr Api I 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 to get for the Flickr Api and copy that url into the “provideUri” string.