The JSON value could not be converted to AppWeb.Shared.Models.ActionItem[

Question

Hi,

I want to rendering the DataGrid via radzen library but I'm not sure that provide from radzen.

The error message is :

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]  
      Unhandled exception rendering component: The JSON value could not be converted to AppWeb.Shared.Models.ActionItem[].  

The DataGrid has a relationship one to many with Another Table Developer;
AS you can see in picture below I want to rendering in DataGrid actionItems.
The method [HttpPut] is correct.

<RadzenDataGrid @ref="gridaction"  AllowFiltering="true" AllowPaging="true" PageSize="5" AllowSorting="true" EditMode="DataGridEditMode.Single"  
                Data="@action.Where(a => a.DeveloperId==developerId)" TItem="ActionItem" CellRender="@CellRender" RowRender="@RowRender" ExpandMode="DataGridExpandMode.Single"  
                SelectionMode="DataGridSelectionMode.Single" >  
  
               <Columns>  
                    <RadzenDataGridColumn TItem="ActionItem" Property="ActionId" Title="ActionId" Width="80px"/>                      
                   <RadzenDataGridColumn TItem="ActionItem" Property="Tilte" Title="Title" Width="80px"/>  
                   <RadzenDataGridColumn TItem="ActionItem" Property="DescriptionA" Title="Description"   
               </Columns>  
 </RadzenDataGrid>   
  
@code{  
 [Parameter] public int developerId { get; set; }  
 ActionItem[]? action { get; set; }  
  
  protected override async Task OnInitializedAsync()  
   {              
        action = await http.GetFromJsonAsync<ActionItem[]>($"api/developer/{developerId}");  
   }       
}  

Have you an idea how I can fix this error?

Answer 1

Hi @sblb , according to the error message you shared, it seems that the issue happened when converting JSON data.

Per my searching, we need to set collection of items (IEnumerable<>) to Data property, and you are trying to convert to ActionItem[] which is an array. I test it and it worked as well.

I'm afraid you can try to change http.GetFromJsonAsync<ActionItem[]>. In your screenshoot, ActionItem is a part of the API response, so you may set the <TValue> to <DeveloperItem>, which contained a list of ActionItem.

RadzenDataGrid Data="@actions" TItem="ActionItem">  
    <Columns>  
        <RadzenDataGridColumn TItem="ActionItem" Property="ActionId" Title="Action ID" />  
        <RadzenDataGridColumn TItem="ActionItem" Property="Title" Title="Title" />  
        <RadzenDataGridColumn TItem="ActionItem" Property="Description" Title="Description" />  
    </Columns>  
</RadzenDataGrid>  
  
<RadzenDataGrid Data="@array" TItem="ActionItem">  
    <Columns>  
        <RadzenDataGridColumn TItem="ActionItem" Property="ActionId" Title="Action ID" />  
        <RadzenDataGridColumn TItem="ActionItem" Property="Title" Title="Title" />  
        <RadzenDataGridColumn TItem="ActionItem" Property="Description" Title="Description" />  
    </Columns>  
</RadzenDataGrid>  
  
  
@code {  
    IEnumerable<ActionItem> actions;  
    ActionItem[] array = new ActionItem[2];  
  
    protected override void OnInitialized()  
    {  
        actions = new List<ActionItem> {  
            new ActionItem{ ActionId = "1", Title = "Title1", Description = "Desc1"},  
            new ActionItem{ ActionId = "2", Title = "Title2", Description = "Desc2"},  
            new ActionItem{ ActionId = "3", Title = "Title3", Description = "Desc3"}  
        };  
  
        array[0] = new ActionItem { ActionId = "4", Title = "Title4", Description = "Desc4" };  
        array[1] = new ActionItem { ActionId = "5", Title = "Title5", Description = "Desc5" };  
    }  
  
}  

Here's my test:

---

If the answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best Regards,
TinyWang

Answer 2

the api response looks like :

You will find below the class model that I defined

  public class Developer  
    {  
        public int DeveloperId { get; set; }  
...  
public List<ActionItem>? ActionItems { get; set; }  
}  
  
  
 public class ActionItem  
    {  
        [Key]  
        public int ActionId { get; set; }         
        public string? Tilte { get; set; }  
        public string? DescriptionA { get; set; }          
        public string? State { get; set; }          
        public DateTime? OpenDate { get; set; }         
        public DateTime? PlanDate { get; set; }         
        public DateTime? CloseDate { get; set; }  
  
         
        public int DeveloperId { get; set; }  
        public Developer? Developer { get; set; }  
    }     

If I understood I have to define a new class. Why?

Answer 3

Hi,
Exact I added Data="@dev.ActionItems" in RadzenDataGrid

dev which corresponding to your developer

thank you very much to your support !