How to Invoke Js file once data is loaded in Blazor-CodePudding

Am calling api to load data under async Task OnAfterRenderAsync(bool firstRender) But jscript is loaded before users gets loaded in UI

How can i calling js once data is loaded in Users list?

Code behind

protected override async Task OnAfterRenderAsync(bool firstRender)
{
   List<User> users = await Getuser(Request);
   await jsRuntime.InvokeAsync<IJSObjectReference>("import", "/js/scripts/test.js");
}

  <div >
    <ul>
      @foreach (var user in users)
       {
         <li>
          <h5 >@user.name</h5>                               
         </li>
       }
    </ul>
  <div>

CodePudding user response：

In OnAfterRenderAsync() method, you are load user data (from API) to local variable. Your foreach loop works on another list declared in the component.

Use:

users = await Getuser(Request);

instead of:

List<User> users = await Getuser(Request);

CodePudding user response：

Use OnInitializedAsync to retrieve data and OnAfterRenderAsync for js interop.

private List<User> users;

protected override async Task OnInitializedAsync()
{
    users = await Getuser(Request);
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await jsRuntime.InvokeAsync<IJSObjectReference>("import", "/js/scripts/test.js");
    }
}

Also in UI you should check if list is null.

@if (users != null)
{
  <div >
    <ul>
      @foreach (var user in users)
      {
        <li>
          <h5 >@user.name</h5>                               
        </li>
      }
    </ul>
  <div>
}
else
{
  <p>Loading...</p>
}

Blazor component lifecycle