I have a blazor component that executes a GET request to a MongoDB instance. The return value includes a JSON with a nested list like this
{
"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"
}
]
}
The GET request is executed using this function
private async Task GetTeamInfo(string id)
{
teamIdList = await Http.GetFromJsonAsync<List<Team>>($"api/team/{id}");
}
How do I display only the teamMemberList information in a table like this?
<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>
Thanks in advance!