Blazor webassembly external api 不工作，除非 JSON 在数组内

Question

我刚开始使用 Blazor，我正在尝试进行外部 API 调用，这与启动器 WeatherForcast API 调用非常相似。但是，不同之处在于外部 API 调用没有将 JSON 对象包装在数组中。我只是想知道我需要改变什么才能让它工作。我确实确认我是否将它包装在一个可以工作的数组中。我将 api 结果复制到示例 weather.json 中，结果相同。

@page "/"
@inject HttpClient Http

<h1>Pokemon</h1>

<p></p>

@if (pokemons == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="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/"
      }
    ]
  }

如果您将整个 json 包装在一个数组中，它会工作，否则我会收到以下错误：

Answer 1

您要求解码一组 PokemonLists

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

但是那里没有数组。只是一个 PokeMonList 中的数组。做

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

和

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

Blazor webassembly external api 不工作，除非 JSON 在数组内

Blazor webassembly external api not working unless JSON is inside array

c#

json

blazor

blazor-webassembly