如何获取Get请求返回的嵌套JSON用户列表并在MatTable中展示？

问题原因 #

你当前代码的核心问题是接口返回的JSON根节点不是直接的用户数组，而是包含分页信息、data用户集合的嵌套结构，你直接将返回值反序列化为User[]会因结构不匹配无法拿到正确的用户数据，导致表格为空。

解决步骤 #

你需要新增一个对应JSON根结构的响应包装类，先反序列化得到根对象，再提取其中嵌套的data字段作为表格数据源即可，调整后的完整代码如下：

@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() 
    {
        // 先反序列化得到根响应对象
        var apiResponse = await Http.GetFromJsonAsync<ApiResponse>("https://reqres.in/api/users");
        // 提取嵌套的用户数组
        users = apiResponse?.Data;
    }
    
    // 新增根响应包装类，对应接口返回的完整JSON结构
    public class ApiResponse
    {
        public int Page { get; set; }
        public int Per_page { get; set; }
        public int Total { get; set; }
        public int Total_pages { get; set; }
        public User[] Data { get; set; }
    }

    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()
        {
        }
    }
}

可选优化 #

如果需要符合C#的命名规范（帕斯卡命名，无下划线），可以给属性加上JsonPropertyName特性做映射，示例如下：

public class User
{
    [JsonPropertyName("id")]
    public int Id { get; set; }
    [JsonPropertyName("email")]
    public string Email { get; set; }
    [JsonPropertyName("first_name")]
    public string FirstName { get; set; }
    [JsonPropertyName("last_name")]
    public string LastName { get; set; }
    [JsonPropertyName("avatar")]
    public string Avatar { get; set; }
}

修改后表格里对应的字段绑定也要同步调整为@context.FirstName、@context.LastName即可。

内容的提问来源于stack exchange，提问作者Tassisto