How to get a list of another list from different API routes in Blazor?

I've hit a brickwall and I'm wondering how to solve this problem. I'm trying to learn Blazor and I'm using an open API to receive data about Game of Thrones Houses and all their sworn members. So what I'm basically trying to receive is a list inside another list but with two different routes. My expected output is to be clicking a house name and another list should be added to my table with the members.

Expected output

House Targaryen - Daenerys Targaryen                - Aegon Targaryen

etc...

House route https://anapioficeandfire.com/api/houses/378Character route https://anapioficeandfire.com/api/characters/33

    @page "/fetchdata"@using System.Text.Json.Serialization@using System.Text.Json@inject HttpClient Http<h1>Game of Thrones</h1><p>This component demonstrates fetching data from the server.</p>@if (houses == null){<p><em>Loading...</em></p>}else{<table class="table"><thead><tr><th>Houses</th></tr></thead><tbody>        @foreach (var house in houses.Take(5))        {<tr><td>@house.Name</td>                @foreach (var character in house.SwornMembers.Take(5))                {<td><tr>@character</tr></td>                }</tr>        }</tbody></table>}@code {    List<House> houses;    List<Character> characters;    protected override async Task OnInitializedAsync()    {        houses = await Http.GetFromJsonAsync<List<House>>("https://anapioficeandfire.com/api/houses/");        Console.WriteLine(houses);    }    public class House    {        public string Name { get; set; }        public List<Character> SwornMembers { get; set; }    }    public class Character    {        public string Name { get; set; }        public string Gender { get; set; }        public string Culture { get; set; }        public string Born { get; set; }    }}