Blazor webassembly external api not working unless JSON is inside array

Question

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 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/"
      }
    ]
  }

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

pm100 · Accepted Answer · 2022-02-22 23:21:54Z

2

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>

answered Feb 22, 2022 at 23:21

pm100

50.6k25 gold badges95 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lynx Over a year ago

Thank you! The two foreach loops were what was throwing me off. Thank you for explaining.

Collectives™ on Stack Overflow

Blazor webassembly external api not working unless JSON is inside array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related