首页 > 解决方案 > 在 Blazor 组件中以 JSON 格式显示嵌套列表

问题描述

我有一个执行对 MongoDB 实例的 GET 请求的 blazor 组件。返回值包括一个带有嵌套列表的 JSON,如下所示

{
    "id": "5fd4c3e8693957ddf08a2835",
    "name": "Team 1",
    "location": "Test Building",
    "type": "Staff",
    "teamMembers": [
        "5fd4c3f6693957ddf08a2836",
        "5fd4c408693957ddf08a2837",
        "5fd4c418693957ddf08a2838"
    ],
    "teamMemberList": [
        {
            "id": "5fd4c3f6693957ddf08a2836",
            "name": "John Smith",
            "position": "Tech Lead",
            "role": "Team Leader"
        },
        {
            "id": "5fd4c408693957ddf08a2837",
            "name": "Joe Snuffy",
            "position": "Network Admin",
            "role": "Team Member"
        },
        {
            "id": "5fd4c418693957ddf08a2838",
            "name": "Jose Snuffy",
            "position": "Network Admin",
            "role": "Team Member"
        }
    ]
}

使用此函数执行 GET 请求

private async Task GetTeamInfo(string id)
    {
        teamIdList = await Http.GetFromJsonAsync<List<Team>>($"api/team/{id}");
    }

如何在这样的表格中仅显示 teamMemberList 信息?

                                <table class='table'>
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Rank</th>
                                            <th>Role</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                            <tr>
                                                <td>@teammember.Name</td>
                                                <td>@teammember.Rank</td>
                                                <td>@teammember.Role</td>
                                            </tr>
                                    </tbody>
                               </table>

提前致谢!

标签: c#jsonmongodbblazor

解决方案


推荐阅读