How do I get nested JSON data list and display it in a MatTable?

Question

The JSON data below is obtained through a Get Request to the service https://reqres.in/api/users

The data-objects are users (based on their values), I want to get that User information which is nested in the root, to display the list in the MatTable component

{
    "page": 1,
    "per_page": 6,
    "total": 12,
    "total_pages": 2,
    "data": [
        {
            "id": 1,
            "email": "george.bluth@reqres.in",
            "first_name": "George",
            "last_name": "Bluth",
            "avatar": "https://reqres.in/img/faces/1-image.jpg"
        },
        {
            "id": 2,
            "email": "janet.weaver@reqres.in",
            "first_name": "Janet",
            "last_name": "Weaver",
            "avatar": "https://reqres.in/img/faces/2-image.jpg"
        },
        {
            "id": 3,
            "email": "emma.wong@reqres.in",
            "first_name": "Emma",
            "last_name": "Wong",
            "avatar": "https://reqres.in/img/faces/3-image.jpg"
        },
        {
            "id": 4,
            "email": "eve.holt@reqres.in",
            "first_name": "Eve",
            "last_name": "Holt",
            "avatar": "https://reqres.in/img/faces/4-image.jpg"
        },
        {
            "id": 5,
            "email": "charles.morris@reqres.in",
            "first_name": "Charles",
            "last_name": "Morris",
            "avatar": "https://reqres.in/img/faces/5-image.jpg"
        },
        {
            "id": 6,
            "email": "tracey.ramos@reqres.in",
            "first_name": "Tracey",
            "last_name": "Ramos",
            "avatar": "https://reqres.in/img/faces/6-image.jpg"
        }
    ],
    "support": {
        "url": "https://reqres.in/#support-heading",
        "text": "To keep ReqRes free, contributions towards server costs are appreciated!"
    }
}

So far I implemented a MatTable (which is empty), I need to get the users list from the JSON Get Request

@if (users == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <MatTable Items="@users" class="mat-elevation-z5">
        <MatTableHeader>
            <th>Id</th>
            <th>Email</th>
            <th>Name</th>
            <th>Last Name</th>
            <th>Avatar</th>
        </MatTableHeader>
        <MatTableRow>
            <td>@String.Format("{0:d}", @context.Id)</td>
            <td>@context.Email</td>
            <td>@context.First_name</td>
            <td>@context.Last_name</td>
            <td><img src="@context.Avatar" /></td>
        </MatTableRow>
    </MatTable>
}
 
@code
{
    private User[]? users;

    protected override async Task OnInitializedAsync() => users = await Http.GetFromJsonAsync<User[]>("https://reqres.in/api/users");
    
    public class User
    {
        public int Id { get; set; }
        public string Email { get; set; }
        public string First_name { get; set; }
        public string Last_name { get; set; }
        public string Avatar { get; set; }
 
        public User()
        {
        }
    }
}

Answer 1

I solved this problem by deserializing the response from Get Request and added a scope to the api

builder.Services.AddScoped<HttpClient>(s =>
{
    return new HttpClient { BaseAddress = new Uri(@"https://reqres.in/") };
});

The MatTable-component which gets filled by User records

@if (Users == null)
{
    <p>
        <em>Loading...</em>
    </p>
}
else
{
    <MatTable Items="@Users" class="mat-elevation-z5">
        <MatTableHeader>
            <th>Id</th>
            <th>Email</th>
            <th>Name</th>
            <th>Last Name</th>
            <th>Avatar</th>
        </MatTableHeader>
        <MatTableRow>
            <td>@String.Format("{0:d}", @context.Id)</td>
            <td>@context.Email</td>
            <td>@context.FirstName</td>
            <td>@context.LastName</td>
            <td><img src="@context.AvatarURI" /></td>
        </MatTableRow>
    </MatTable>
}

The @code-part contains following code (which calls Get Request On Initialized - The response result is then deserialized and converted)

List<User> Users = new List<User>(); 
protected override async Task OnInitializedAsync()
{
    var apiName = "api/users";
    var httpResponse = await client.GetAsync(apiName);

    if (httpResponse.IsSuccessStatusCode)
    {
        Response responseData = JsonConvert.DeserializeObject<Response>(await httpResponse.Content.ReadAsStringAsync());
        Users = responseData.Users;
        StateHasChanged();
    }
}

public class User
{
    [JsonProperty("id")]
    public int Id { get; set; }
    
    [JsonProperty("email")]
    public string Email { get; set; }

    [JsonProperty("first_name")]
    public string FirstName { get; set; }

    [JsonProperty("last_name")]
    public string LastName { get; set; }

    [JsonProperty("avatar")]
    public string AvatarURI { get; set; }
}

public class Response
{
    [JsonProperty("page")]
    public int Page { get; set; }

    [JsonProperty("per_page")]
    public int PerPage { get; set; }

    [JsonProperty("total")]
    public int Total { get; set; }

    [JsonProperty("total_pages")]
    public int TotalPages { get; set; }

    [JsonProperty("data")]
    public List<User> Users { get; set; }
}