如何获取嵌套的 JSON 数据列表并将其显示在 MatTable 中？

Question

下面的JSON数据是通过对服务https://reqres.in/api/users的Get Request获得的

数据-对象是用户（基于他们的值），我想获取嵌套在根目录中的用户信息，以在 MatTable 组件中显示列表

{
    "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!"
    }
}

到目前为止，我实现了一个 MatTable（它是空的），我需要从 JSON 获取请求中获取用户列表

@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

我通过反序列化来自 Get Request 的响应解决了这个问题 并为 api 添加了一个范围

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

MatTable-被用户记录填充的组件

@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>
}

@code-part 包含以下代码（调用 Get Request On Initialized - 然后对响应结果进行反序列化和转换）

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; }
}