how to make HTTP GET specific data in Blazor?

Question

I had created a controller HttpGet to get specific user data, but when I call the API in client side, it doesn't show the results.

Controller

[HttpGet("{Id}/{Username}")]
public ApplicationUser Details(string Id, string Username)
{
  return _dataAccessProvider.GetAspNetUsersSingleRecord(Id, Username);
}

Client side call API by HttpGet

@code {
    private UserProfile[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<UserProfile[]>("Authentication/ed131c76-4a3a-4626-aec5-3db534f14a30/amrita");
    }
}

GetAspNetUsersSingleRecord

public ApplicationUser GetAspNetUsersSingleRecord(string Id, string Username)
{
     return _context.applicationUser.FirstOrDefault(t => t.Id == Id &&  t.UserName == Username);
}

Got this error

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: The JSON value could not be converted to BlazorWebAssemblyFrontEnd.Pages.UserProfile[]. Path: $ | LineNumber: 0 | BytePositionInLine: 1. System.Text.Json.JsonException: The JSON value could not be converted to BlazorWebAssemblyFrontEnd.Pages.UserProfile[]. Path: $ | LineNumber: 0 | BytePositionInLine: 1. at System.Text.Json.ThrowHelper.ThrowJsonException_DeserializeUnableToConvertValue (System.Type propertyType) <0x30082d0 + 0x00032> in :0 at System.Text.Json.Serialization.Converters.IEnumerableDefaultConverter2[TCollection,TElement].OnTryRead (System.Text.Json.Utf8JsonReader& reader, System.Type typeToConvert, System.Text.Json.JsonSerializerOptions options, System.Text.Json.ReadStack& state, TCollection& value) <0x3005988 + 0x001de> in <filename unknown>:0 at System.Text.Json.Serialization.JsonConverter1[T].TryRead (System.Text.Json.Utf8JsonReader& reader, System.Type typeToConvert, System.Text.Json.JsonSerializerOptions options, System.Text.Json.ReadStack& state, T& value) <0x3005008 + 0x0029a> in :0 at System.Text.Json.Serialization.JsonConverter1[T].ReadCore (System.Text.Json.Utf8JsonReader& reader, System.Text.Json.JsonSerializerOptions options, System.Text.Json.ReadStack& state) <0x30048a8 + 0x00292> in <filename unknown>:0 at System.Text.Json.JsonSerializer.ReadCore[TValue] (System.Text.Json.Serialization.JsonConverter jsonConverter, System.Text.Json.Utf8JsonReader& reader, System.Text.Json.JsonSerializerOptions options, System.Text.Json.ReadStack& state) <0x2ff9b20 + 0x0002a> in <filename unknown>:0 at System.Text.Json.JsonSerializer.ReadCore[TValue] (System.Text.Json.JsonReaderState& readerState, System.Boolean isFinalBlock, System.ReadOnlySpan1[T] buffer, System.Text.Json.JsonSerializerOptions options, System.Text.Json.ReadStack& state, System.Text.Json.Serialization.JsonConverter converterBase) <0x2ff99e8

• 0x00058> in :0 at System.Text.Json.JsonSerializer.ReadAsync[TValue] (System.IO.Stream utf8Json, System.Type returnType, System.Text.Json.JsonSerializerOptions options, System.Threading.CancellationToken cancellationToken) <0x2ff3d68 + 0x0033c> in :0 at System.Threading.Tasks.ValueTask1[TResult].get_Result () <0x309b428 + 0x00034> in <filename unknown>:0 at System.Net.Http.Json.HttpContentJsonExtensions.ReadFromJsonAsyncCore[T] (System.Net.Http.HttpContent content, System.Text.Encoding sourceEncoding, System.Text.Json.JsonSerializerOptions options, System.Threading.CancellationToken cancellationToken) <0x2fedb48 + 0x00218> in <filename unknown>:0 at System.Net.Http.Json.HttpClientJsonExtensions.GetFromJsonAsyncCore[T] (System.Threading.Tasks.Task1[TResult] taskResponse, System.Text.Json.JsonSerializerOptions options, System.Threading.CancellationToken cancellationToken) <0x2f62e50 + 0x001d2> in :0 at BlazorWebAssemblyFrontEnd.Pages.Profile.OnInitializedAsync () [0x00033] in C:\Users\yaps\source\repos\BlazorWebAssemblyFrontEnd\Pages\Profile.razor:44 at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync () <0x2c866d8 + 0x0013a> in :0 at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask (System.Threading.Tasks.Task taskToHandle) <0x2f09b70 + 0x000b6> in :0

Answer 1

The client expect another response from the server. The client side expect a array (a sort list) and the server side returned a single object.

I would expect this:

private UserProfile forecasts;

protected override async Task OnInitializedAsync()
{
    forecasts = await Http.GetFromJsonAsync<UserProfile>("Authentication/ed131c76-4a3a-4626-aec5-3db534f14a30/amrita");
}

The properties need to match to get the data in the object of UserProfile. Otherwise some of the properties will be empty.

A good practice would be to create a shared project with the client and the server side with the possible responses and requests. Then you should have a less chance to get a mismatch.