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

Posted 2023-03-30

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

【英文标题】：How do I get nested JSON data list and display it in a MatTable?

【发布时间】：2022-01-01 04:30:22

【问题描述】：

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

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

    "page": 1,
    "per_page": 6,
    "total": 12,
    "total_pages": 2,
    "data": [
        
            "id": 1,
            "email": "[e-mail]",
            "first_name": "George",
            "last_name": "Bluth",
            "avatar": "https://reqres.in/img/faces/1-image.jpg"
        ,
        
            "id": 2,
            "email": "[e-mail]",
            "first_name": "Janet",
            "last_name": "Weaver",
            "avatar": "https://reqres.in/img/faces/2-image.jpg"
        ,
        
            "id": 3,
            "email": "[e-mail]",
            "first_name": "Emma",
            "last_name": "Wong",
            "avatar": "https://reqres.in/img/faces/3-image.jpg"
        ,
        
            "id": 4,
            "email": "[e-mail]",
            "first_name": "Eve",
            "last_name": "Holt",
            "avatar": "https://reqres.in/img/faces/4-image.jpg"
        ,
        
            "id": 5,
            "email": "[e-mail]",
            "first_name": "Charles",
            "last_name": "Morris",
            "avatar": "https://reqres.in/img/faces/5-image.jpg"
        ,
        
            "id": 6,
            "email": "[e-mail]",
            "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()
        
        
    

【参考方案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;