Search code examples
c#jsontextgridviewuwp

Display Json on Gridview inside A Gridview


I have a Json, like the image below:

json

I want to display "majors" into a gridview inside a gridview

XAML:

<GridView x:Name="asesmenGridView">
    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid x:Name="asesmenGrid"> 
                <TextBlock  
                    x:Name="judulT"
                    Text="{Binding Title}"/>
                <GridView
                    x:Name="majorGridView"
                                        ItemsSource="{Binding DataContext.majordatasource, ElementName=asesmenGridView}">
                        <GridView.ItemTemplate>
                                                    <DataTemplate x:DataType="local:MajorClass">
                                <Grid>
                                                                        <TextBlock
                                                                            x:Name="kelasT"
                                                                            Text="{x:Bind Major}"  />
                                                                </Grid>
                            </DataTemplate>
                                                    </GridView.ItemTemplate>
                                                </GridView>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

Code:

    public MainPage()
                {
                    this.InitializeComponent();
                this.DataContext = this;
                }
        public List<MajorClass> majordatasource { get; set; } = new List<MajorClass>();    
        string urlPath = "https://.../choose-exam/2";
                                    var httpClient = new HttpClient(new HttpClientHandler());
                                    httpClient.DefaultRequestHeaders.Add("Authorization",
                                        string.Format("Bearer {0}", tkn));
                                    var response = await httpClient.GetAsync(urlPath);
             string jsonText = await response.Content.ReadAsStringAsync();
                                    try
                                    {
                                        JsonArray jsonArray = JsonArray.Parse(jsonText);
                                        foreach (JsonValue groupValue in jsonArray)
                                        {
                                            string title = groupObject["title"].GetString();
             JsonArray majorArray = groupObject["majors"].GetArray();
                                            MajorClass majorC = new MajorClass();
                                            foreach (JsonValue majorValue in majorArray)
                                            {
                                                JsonObject majorObject = majorValue.GetObject();
                                                double majorID = majorObject["major_id"].GetNumber();
                                                string major = majorObject["major"].GetString();
            
                                                majorC.MajorID = (int)majorID;
                                                majorC.Major = major + ",";
                                                majordatasource.Add(majorC);
                                            }
Ujian ujian = new Ujian();
                                    ujian.Title = title;
             ujiandatasource.Add(ujian);
            }
            asesmenGridView.ItemsSource = ujiandatasource;

Ujian Class:

public class Ujian
    {
        public string Title { get; set; }
        public ObservableCollection<MajorClass> majordatasource { get; set; }

        public Ujian()
        {
            Title = string.Empty;
            majordatasource = new ObservableCollection<MajorClass>();
        }

        public Ujian(string title)
        {
            Title = title;
        }
    }

    public class MajorClass
    {
        public int MajorID { get; set; }
        public string Major { get; set; }
    }
}

From the code above, I didn't manage to display it on the gridview in a gridview (the data that is retrieved is only the last data and is displayed repeatedly, as shown below).

gridview

How to handle it?


Solution

  • Base on your design, you need nest list data structure, and majorGridView could access majordatasource property of Ujian directly. Please pass majordatasource to ujian.majordatasource, but not access separate majordatasource property where in the page class.

    For example

    Ujian ujian = new Ujian();
    ujian.Title = title;
    ujian.majordatasource = majordatasource;
    ujiandatasource.Add(ujian)
    

    Xaml

    <GridView
     x:Name="majorGridView"
     ItemsSource="{Binding majordatasource}">
    

    Update

    try
    {
        JsonArray jsonArray = JsonArray.Parse(jsonText);
        foreach (JsonValue groupValue in jsonArray)
        {
            var groupObject = groupValue.GetObject();
            string title = groupObject["title"].GetString();
            JsonArray majorArray = groupObject["majors"].GetArray();
            var majordatasource = new ObservableCollection<MajorClass>();
           
            foreach (JsonValue majorValue in majorArray)
            {
                MajorClass majorC = new MajorClass();
                JsonObject majorObject = majorValue.GetObject();
                double majorID = majorObject["major_id"].GetNumber();
                string major = majorObject["major"].GetString();
    
                majorC.MajorID = (int)majorID;
                majorC.Major = major + ",";
                majordatasource.Add(majorC);
            }
    
    
            Ujian ujian = new Ujian();
            ujian.majordatasource = majordatasource;
            ujian.Title = title;
            ujiandatasource.Add(ujian);
        }
    }
    catch
    {
    
    }