Display Json on gridview and listview with specific condition

Question

I have json shown in gridview. In the gridview displays the title and when clicked will appear a listview that takes data from json on the xfile array. JSON:

{
    "error": false,
    "total_data": 94,
    "data_per_page": "20",
    "total_page": 5,
    "current_total": 20,
    "tipe": "Video",
    "data": [
        {
            "judul": "Kelas 01 Bab 02 Tematik Mengenal Bagian Tubuh",
            "fname": "Kelas_01_Bab_02_Tematik_Mengenal_Bagian_Tubuh.mp4",
            "xfile": [
                {
                    "url": "http://10.26.0.100:8080/video/SD_1/Kelas_01_Bab_02_Tematik_Mengenal_Bagian_Tubuh.mp4",
                    "ukuran": 33295148,
                    "formated_size": "31.75M",
                    "res": "hd"
                },
                {
                    "url": "NOT EXIST",
                    "ukuran": 0,
                    "formated_size": "0.00B",
                    "res": "med"
                },
                {
                    "url": "http://10.26.0.100:8080/video/SD_1/converted/Kelas_01_Bab_02_Tematik_Mengenal_Bagian_Tubuh_320x180.mp4",
                    "ukuran": 8278244,
                    "formated_size": "7.89M",
                    "res": "low"
                }
            ]
        },
        {
            "judul": "Kelas 01 Bab 04 Agama Islam Bersih Itu Sehat",
            "fname": "Kelas_01_Bab_04_Agama_Islam_Bersih_Itu_Sehat.mp4",
            "xfile": [
                {
                    "url": "http://10.26.0.100:8080/video/SD_1/Kelas_01_Bab_04_Agama_Islam_Bersih_Itu_Sehat.mp4",
                    "ukuran": 56111407,
                    "formated_size": "53.51M",
                    "res": "hd"
                },
                {
                    "url": "NOT EXIST",
                    "ukuran": 0,
                    "formated_size": "0.00B",
                    "res": "med"
                },
                {
                    "url": "http://10.26.0.100:8080/video/SD_1/converted/Kelas_01_Bab_04_Agama_Islam_Bersih_Itu_Sehat_320x180.mp4",
                    "ukuran": 11351698,
                    "formated_size": "10.83M",
                    "res": "low"
                }
            ]
        },

Code:

ObservableCollection<Video> datasource = new ObservableCollection<Video>();
ObservableCollection<XFile> data = new ObservableCollection<XFile>();    
try
    {
        loading.Visibility = Visibility.Visible;
        busyindicator.IsActive = true;
        string urlPath1 = kelas.Link;
        var httpClient1 = new HttpClient(new HttpClientHandler());

        var values1 = 
            new List<KeyValuePair<string, string>>
            {
                new KeyValuePair<string, string>("halaman", noHal.ToString()),
                new KeyValuePair<string, string>("limit", limit.ToString())
            };

        var response1 = await httpClient1.PostAsync(urlPath1, new FormUrlEncodedContent(values1));
        response1.EnsureSuccessStatusCode();

        if (!response1.IsSuccessStatusCode)
        {
            busyindicator.IsActive = false;
            RequestException();
        }
        string jsonText1 = await response1.Content.ReadAsStringAsync();
        JsonObject jsonObject1 = JsonObject.Parse(jsonText1);
        JsonArray jsonData1 = jsonObject1["data"].GetArray();

        foreach (JsonValue groupValue1 in jsonData1)
        {
            JsonObject groupObject2 = groupValue1.GetObject();

            string title = groupObject2["judul"].GetString();
            string cover = groupObject2.ContainsKey("cover") && groupObject2["cover"] != null ? groupObject2["cover"].GetString() : string.Empty;
            string fname = groupObject2["fname"].GetString();

            Video file1 = new Video();
            file1.Judul = title;
            file1.Cover = cover;
            file1.FName = fname;

            JsonArray pathJson = groupObject2["xfile"].GetArray();\
            foreach (JsonValue groupValue2 in pathJson)
            {
                JsonObject groupObject3 = groupValue2.GetObject();
                string url = groupObject3["url"].GetString();
                string size = groupObject3["formated_size"].GetString();
                string resolution = groupObject3["res"].GetString();
                XFile file2 = new XFile();
                file2.URL = url;
                file2.Size = size;
                file2.Resolution = resolution;
                data.Add(file2);
            }

            datasource.Add(file1);
        }

        itemGridView.ItemsSource = datasource;

    //...

    private async void ItemView_ItemClick(object sender, ItemClickEventArgs e)
    {
        AvaibleRes.IsOpen = true;
        Video item = e.ClickedItem as Video;
        DetailJudul.Text = item.Judul;
        ResolutionList.ItemsSource = data;
    }

    private void ResolutionList_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (ResolutionList.SelectedIndex != -1)
        {
            XFile res = e.AddedItems[0] as XFile;
            DetailURL.Text = res.URL;
        }
    }

Video:

public class Video
{
    public string Judul { get; set; }
    public string FName { get; set; }
}

XFile:

public class XFile
{
    public string URL { get; set; }

        public string Size { get; set; }

        public string Resolution { get; set; }
}

I have a problem, namely: after clicking on gridview, the listview displays all xfile data. I want to click, for example: Class 01 Chapter 02 Thematic Knowing the Body Parts, then the data displayed in the listview is only xfile on that data only. How to handle it?

Answer 1

First of all try to create quick type for your json.

public class Xfile
{
    public string url { get; set; }
    public int ukuran { get; set; }
    public string formated_size { get; set; }
    public string res { get; set; }
}

public class video
{
    public string judul { get; set; }
    public string fname { get; set; }
    public string cover { get; set; }
    public ObservableCollection<Xfile> xfile { get; set; }
}

public class RootObject
{
    public bool error { get; set; }
    public int total_data { get; set; }
    public string data_per_page { get; set; }
    public int total_page { get; set; }
    public int current_total { get; set; }
    public string tipe { get; set; }

    [JsonProperty("data")]
    public ObservableCollection<video> videos { get; set; }
}

Then below code deserialize your json to your quick type by using Newtonsoft.json

ObservableCollection<Video> datasource = new ObservableCollection<Video>();
ObservableCollection<XFile> data = new ObservableCollection<XFile>();    
try
    {
       //Your code here

       string jsonText1 = await response1.Content.ReadAsStringAsync();
       RootObject rootObject = JsonConvert.DeserializeObject<RootObject>(jsonText1);

       itemGridView.ItemsSource = rootObject.videos.Select(x => new video { fname = x.fname, judul = x.judul, cover = x.cover }).ToList();   

       //Your code here        
    }

In your ItemView_ItemClick .

private async void ItemView_ItemClick(object sender, ItemClickEventArgs e)
{
    AvaibleRes.IsOpen = true;
    video item = e.ClickedItem as video;
    DetailJudul.Text = item.judul;
    ResolutionList.ItemsSource = rootObject.videos.Where(x => x.judul == item.Judul)
                                                  .SelectMany(x => x.xfile).ToList();
}

Note: Make RootObject rootObject = new RootObject(); object globally so you can access it through across multiple method or events.

Output: