deserialization json data to get the image using c#

Question

I make a request at wikipedia api to get 3 image url , so that I can use this picture in my code. I use the url https://en.wikipedia.org/w/api.php?action=query&prop=imageinfo&format=json&iiprop=url&iiurlwidth=400&titles=File%3ALuftbild%20Flensburg%20Schleswig-Holstein%20Zentrum%20Stadthafen%20Foto%202012%20Wolfgang%20Pehlemann%20Steinberg-Ostsee%20IMG%206187.jpg%7CFile%3AHafen%20St%20Marien%20Flensburg2007.jpg%7CFile%3ANordertor%20im%20Schnee%20(Flensburg%2C%20Januar%202014).JPG to get three image. I got following json file from json2csharp.

         public class Imageinfo
         {
            public string thumburl { get; set; }
            public int thumbwidth { get; set; }
            public int thumbheight { get; set; }
            public string url { get; set; }
            public string descriptionurl { get; set; }
        }

         public class Pageval1
         {
            public int ns { get; set; }
            public string title { get; set; }
            public string missing { get; set; }
            public string imagerepository { get; set; }
            public List<Imageinfo> imageinfo { get; set; }
         }

        public class Imageinfo2
        {
            public string thumburl { get; set; }
            public int thumbwidth { get; set; }
            public int thumbheight { get; set; }
            public string url { get; set; }
            public string descriptionurl { get; set; }
        }

        public class Pageval2
        {
            public int ns { get; set; }
            public string title { get; set; }
            public string missing { get; set; }
            public string imagerepository { get; set; }
            public List<Imageinfo2> imageinfo { get; set; }
        }

        public class Imageinfo3
        {
            public string thumburl { get; set; }
            public int thumbwidth { get; set; }
            public int thumbheight { get; set; }
            public string url { get; set; }
            public string descriptionurl { get; set; }
        }

        public class Pageval3
        {
            public int ns { get; set; }
            public string title { get; set; }
            public string missing { get; set; }
            public string imagerepository { get; set; }
            public List<Imageinfo3> imageinfo { get; set; }
        }

        public class Pages
    {
        public List<Pageval1> pageval1 { get; set; }
        public List<Pageval2> pageval2 { get; set; }
        public List<Pageval3> pageval3 { get; set; }
    }


 class Image
 {
    public static PictureBox Image1 = new PictureBox();
    public static PictureBox Image2 = new PictureBox();
    public static PictureBox Image3 = new PictureBox();

    public static void Load_Image1()
    {
      using (WebClient wc = new WebClient())
      {
        var client = new WebClient();
        var uri = ("https://en.wikipedia.org/w/api.php?action=query&prop=imageinfo&format=json&iiprop=url&iiurlwidth=400&titles=File%3ALuftbild%20Flensburg%20Schleswig-Holstein%20Zentrum%20Stadthafen%20Foto%202012%20Wolfgang%20Pehlemann%20Steinberg-Ostsee%20IMG%206187.jpg%7CFile%3AHafen%20St%20Marien%20Flensburg2007.jpg%7CFile%3ANordertor%20im%20Schnee%20(Flensburg%2C%20Januar%202014).JPG");
        var response = client.DownloadString(new Uri(uri));

        var responseJson = JsonConvert.DeserializeObject<RootObject>(response);
        var firstKey1 = responseJson.query.pages.First().Key;
        string image1 = responseJson.query.pages[firstKey1].pageval1.First().imageinfo.First().thumburl;

        String image2 = responseJson.query.pages[firstKey1].pageval2.First().imageinfo.First().thumburl;
        String image3 = responseJson.query.pages[firstKey1].pageval3.First().imageinfo.First().thumburl;

        Image1.SizeMode = PictureBoxSizeMode.StretchImage;
        Image2.SizeMode = PictureBoxSizeMode.StretchImage;
        Image3.SizeMode = PictureBoxSizeMode.StretchImage;
        Image1.LoadAsync(image1);
        Image2.LoadAsync(image2);
        Image3.LoadAsync(image3);




      }
   }
  }


 }

I want to get the thumburl from every imageinfo.But I am not sure how to proceed with these classes to serialize json and then get the image.

Answer 1

I assume the thing you struggling with is how to handle those invalid classes. Well the issue that is happening is that -1, -2, -3 are not valid as C# identifiers so it is unable to create classes for those items.

Since for this case they need to be dynamic we can solve this issue by using a dictionary for the pages element.

Note that I am using Json.Net so you will want to install that via Nuget.

string url = @"https://en.wikipedia.org/w/api.php?action=query&prop=imageinfo&format=json&iiprop=url&iiurlwidth=400&titles=File%3ALuftbild%20Flensburg%20Schleswig-Holstein%20Zentrum%20Stadthafen%20Foto%202012%20Wolfgang%20Pehlemann%20Steinberg-Ostsee%20IMG%206187.jpg|File%3AHafen%20St%20Marien%20Flensburg2007.jpg|File%3ANordertor%20im%20Schnee%20%28Flensburg%2C%20Januar%202014%29.JPG";

// i'll leave it up to you to do any null and error checking
using (var client = new WebClient())
{
    var text = client.DownloadString(url);
    var result = JsonConvert.DeserializeObject<RootObject>(text);

    foreach (var page in result.Query.Pages)
    {
        foreach (var imageInfo in page.Value.ImageInfo)
        {
            Console.WriteLine("{0}: {1}", page.Value.Title, imageInfo.ThumbUrl);
        }
    }
}

// the relevant classes for deserialization

public class RootObject
{
    public string BatchComplete { get; set; }
    public Query Query { get; set; }
}

public class Query
{
    // this is how you can deal with those invalid identifiers
    // the -1, -2, -3 will be placed as keys inside this dictionary
    public Dictionary<string, Page> Pages { set; get; }
}

public class Page
{
    public int Ns { get; set; }
    public string Title { get; set; }
    public string Missing { get; set; }
    public string ImageRepository { get; set; }
    public List<ImageInfo> ImageInfo { get; set; }
}

public class ImageInfo
{
    public string ThumbUrl { get; set; }
    public int ThumbWidth { get; set; }
    public int ThumbHeight { get; set; }
    public string Url { get; set; }
    public string DescriptionUrl { get; set; }
}

The output will be:

File:Luftbild Flensburg Schleswig-Holstein Zentrum Stadthafen Foto 2012 Wolfgang Pehlemann Steinberg-Ostsee IMG 6187.jpg: https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Luftbild_Flensburg_Schleswig-Holstein_Zentrum_Stadthafen_Foto_2012_Wolfgang_Pehlemann_Steinberg-Ostsee_IMG_6187.jpg/400px-Luftbild_Flensburg_Schleswig-Holstein_Zentrum_Stadthafen_Foto_2012_Wolfgang_Pehlemann_Steinberg-Ostsee_IMG_6187.jpg
File:Hafen St Marien Flensburg2007.jpg: https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Hafen_St_Marien_Flensburg2007.jpg/400px-Hafen_St_Marien_Flensburg2007.jpg
File:Nordertor im Schnee (Flensburg, Januar 2014).JPG: https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Nordertor_im_Schnee_%28Flensburg%2C_Januar_2014%29.JPG/400px-Nordertor_im_Schnee_%28Flensburg%2C_Januar_2014%29.JPG