Blazor webassembly external api not working unless JSON is inside array-CodePudding

I am just beginning with Blazor and I am attempting to make an external API call that's very similar to the starter WeatherForcast API call. However, the difference is the external API call does not have the JSON objects wrapped in an array. I am just wondering what I would need to change to get it to work. I did confirm if I wrap it in an array it works. I copied the api results into the sample weather.json with the same results.

@page "/"
@inject HttpClient Http

<h1>Pokemon</h1>

<p></p>

@if (pokemons == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table >
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var pokemon in pokemons)
            {
            @foreach (var n in pokemon.results)
                    {
                        <tr>
                            <td>@n.name</td>
                        </tr>
                    }
            }
        </tbody>
    </table>
}

@code {
    private PokemonList[] pokemons;

    protected override async Task OnInitializedAsync()
    {
        pokemons = await Http.GetFromJsonAsync<PokemonList[]>("sample-data/weather.json");
    }



    public class PokemonDetails
    {
        public string name { get; set; }
        public string url { get; set; }
    }


    public class PokemonList
    {
        public int count { get; set; }
        public string next { get; set; }
        public List<PokemonDetails> results { get; set; }
    }
}

weather.json

  {
    "count": 1126,
    "next": "https://pokeapi.co/api/v2/pokemon/?offset=20&limit=20",
    "previous": null,
    "results": [
      {
        "name": "bulbasaur",
        "url": "https://pokeapi.co/api/v2/pokemon/1/"
      },
      {
        "name": "ivysaur",
        "url": "https://pokeapi.co/api/v2/pokemon/2/"
      },
      {
        "name": "venusaur",
        "url": "https://pokeapi.co/api/v2/pokemon/3/"
      },
      {
        "name": "charmander",
        "url": "https://pokeapi.co/api/v2/pokemon/4/"
      },
      {
        "name": "charmeleon",
        "url": "https://pokeapi.co/api/v2/pokemon/5/"
      },
      {
        "name": "charizard",
        "url": "https://pokeapi.co/api/v2/pokemon/6/"
      },
      {
        "name": "squirtle",
        "url": "https://pokeapi.co/api/v2/pokemon/7/"
      },
      {
        "name": "wartortle",
        "url": "https://pokeapi.co/api/v2/pokemon/8/"
      },
      {
        "name": "blastoise",
        "url": "https://pokeapi.co/api/v2/pokemon/9/"
      },
      {
        "name": "caterpie",
        "url": "https://pokeapi.co/api/v2/pokemon/10/"
      },
      {
        "name": "metapod",
        "url": "https://pokeapi.co/api/v2/pokemon/11/"
      },
      {
        "name": "butterfree",
        "url": "https://pokeapi.co/api/v2/pokemon/12/"
      },
      {
        "name": "weedle",
        "url": "https://pokeapi.co/api/v2/pokemon/13/"
      },
      {
        "name": "kakuna",
        "url": "https://pokeapi.co/api/v2/pokemon/14/"
      },
      {
        "name": "beedrill",
        "url": "https://pokeapi.co/api/v2/pokemon/15/"
      },
      {
        "name": "pidgey",
        "url": "https://pokeapi.co/api/v2/pokemon/16/"
      },
      {
        "name": "pidgeotto",
        "url": "https://pokeapi.co/api/v2/pokemon/17/"
      },
      {
        "name": "pidgeot",
        "url": "https://pokeapi.co/api/v2/pokemon/18/"
      },
      {
        "name": "rattata",
        "url": "https://pokeapi.co/api/v2/pokemon/19/"
      },
      {
        "name": "raticate",
        "url": "https://pokeapi.co/api/v2/pokemon/20/"
      }
    ]
  }

If you wrap the entire json in an array it works if not I get the following error:

CodePudding user response：

YOu are asking to decode an array of PokemonLists

 pokemons = await Http.GetFromJsonAsync<PokemonList[]>("sample-data/weather.json");

but there is no array there. just an array inside one PokeMonList. do

pokemons = await Http.GetFromJsonAsync<PokemonList>("sample-data/weather.json");

and

    <tbody>
        @foreach (var n in pokemons.results)
        {
                    <tr>
                        <td>@n.name</td>
                    </tr>
         }
        
    </tbody>