title: Blazor problem rendering data returned from Web Api
body: <p>I'm hoping someone can suggest how I might figure out where this underlying problem is. I <strong>think</strong> it's <strong>serialization/deserialization</strong> not the grid.</p>
  
  <p>I am trying to render data returned from an ASP.NET Web Api using a Syncfusion Blazor Grid Component. The JliffDocument is from an <a href="https://github.com/vistatec/JliffGraphTools" rel="nofollow noreferrer">open source library</a>. Perhaps the fact that the object is made from composite types is a contributory factor but I can successfully serialize and deserialize the object graph within a unit test. E.g. <code>TextElement</code> implements an interface and <code>Segment</code> stores collections of that interface.</p>
  
  <p><strong>This Works</strong> (but the <code>jlfDoc</code> is locally created data)</p>
  
  <pre class="lang-cs prettyprint-override"><code>&lt;EjsGrid id="Grid" DataSource="@jlfDoc.Segments" Toolbar="@(new List&lt;string&gt;() { "Add", "Edit", "Delete", "Update", "Cancel" })" AllowPaging="true"&gt;
      &lt;GridPageSettings PageSize="5"&gt;&lt;/GridPageSettings&gt;
      &lt;GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"&gt;&lt;/GridEditSettings&gt;
      &lt;GridColumns&gt;
          &lt;GridColumn Field="SourceText" HeaderText="Source"  IsPrimaryKey="true" TextAlign="@Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right" Width="120"&gt;&lt;/GridColumn&gt;
          &lt;GridColumn Field="TargetText" HeaderText="Target" Width="150"&gt;&lt;/GridColumn&gt;
      &lt;/GridColumns&gt;
  &lt;/EjsGrid&gt;
  
  &lt;hr/&gt;
  &lt;p&gt;@rawContent&lt;/p&gt;
  
  &lt;h1&gt;There are @segments Segments&lt;/h1&gt;
  
  &lt;i&gt;@oneTextString&lt;/i&gt;
  
  
  @functions {
      public object gridData { get; set; }
      public JliffDocument jlfDoc { get; set; }
      public string rawContent { get; set; }
      public int segments { get; set; }
      public string oneTextString { get; set; }
      protected override async Task OnInitAsync()
      {
          jlfDoc = new JliffDocument("en-US",
              "it-IT",
              new File("f1",
                  new Unit("u1",
                      new Segment(
                          new TextElement("Hello"),
                          new TextElement("Ciao")),
                      new Segment(
                          new TextElement("Goodnight"),
                          new TextElement("Buonanotte")))));
      }
  }
  </code></pre>
  
  <p><strong>This also partially-works</strong> (The <code>rawContent</code>, <code>segments</code> and <code>oneTextString</code> variables <strong>DO</strong> render if the line <code>jlfDoc = jd;</code> is commented out and <code>DataSource="@jlfDoc.Segments"</code> is removed which suggests that the Api call and de-serialization of jd is successful.</p>
  
  <pre class="lang-cs prettyprint-override"><code>&lt;EjsGrid id="Grid" DataSource="@gridData" Toolbar="@(new List&lt;string&gt;() { "Add", "Edit", "Delete", "Update", "Cancel" })" AllowPaging="true"&gt;
      &lt;GridPageSettings PageSize="5"&gt;&lt;/GridPageSettings&gt;
      &lt;GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"&gt;&lt;/GridEditSettings&gt;
      &lt;GridColumns&gt;
          &lt;GridColumn Field="SourceText" HeaderText="Source"  IsPrimaryKey="true" TextAlign="@Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right" Width="120"&gt;&lt;/GridColumn&gt;
          &lt;GridColumn Field="TargetText" HeaderText="Target" Width="150"&gt;&lt;/GridColumn&gt;
      &lt;/GridColumns&gt;
  &lt;/EjsGrid&gt;
  
  &lt;hr/&gt;
  &lt;p&gt;@rawContent&lt;/p&gt;
  
  &lt;h1&gt;There are @segments Segments&lt;/h1&gt;
  
  &lt;i&gt;@oneTextString&lt;/i&gt;
  
  
  @functions {
      public object gridData { get; set; }
      public JliffDocument jlfDoc { get; set; }
      public string rawContent { get; set; }
      public int segments { get; set; }
      public string oneTextString { get; set; }
      protected override async Task OnInitAsync()
      {
          string serverDoc = String.Empty;
  
          using (HttpClient client = new HttpClient())
          {
              serverDoc = await client.GetStringAsync("https://localhost:44381/api/document");
          }
  
          rawContent = serverDoc;
  
          JliffDocument jd;
          JSON.MakeInto(JSON.Load(serverDoc), out jd);
          segments = jd.Segments.Count;
          oneTextString = jd.Segments[0].TargetText;
          //jlfDoc = jd;
      }
  }
  </code></pre>
  
  <p><strong>This two line change fails</strong></p>
  
  <pre class="lang-cs prettyprint-override"><code>====&gt; DataSource reinstated |
                              |
  &lt;EjsGrid id="Grid" DataSource="@jlfDoc.Segments" Toolbar="@(new List&lt;string&gt;() { "Add", "Edit", "Delete", "Update", "Cancel" })" AllowPaging="true"&gt;
      &lt;GridPageSettings PageSize="5"&gt;&lt;/GridPageSettings&gt;
      &lt;GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"&gt;&lt;/GridEditSettings&gt;
      &lt;GridColumns&gt;
          &lt;GridColumn Field="SourceText" HeaderText="Source"  IsPrimaryKey="true" TextAlign="@Syncfusion.EJ2.RazorComponents.Grids.TextAlign.Right" Width="120"&gt;&lt;/GridColumn&gt;
          &lt;GridColumn Field="TargetText" HeaderText="Target" Width="150"&gt;&lt;/GridColumn&gt;
      &lt;/GridColumns&gt;
  &lt;/EjsGrid&gt;
  
  &lt;hr/&gt;
  &lt;p&gt;@rawContent&lt;/p&gt;
  
  &lt;h1&gt;There are @segments Segments&lt;/h1&gt;
  
  &lt;i&gt;@oneTextString&lt;/i&gt;
  
  
  @functions {
      public object gridData { get; set; }
      public JliffDocument jlfDoc { get; set; }
      public string rawContent { get; set; }
      public int segments { get; set; }
      public string oneTextString { get; set; }
      protected override async Task OnInitAsync()
      {
          string serverDoc = String.Empty;
  
          using (HttpClient client = new HttpClient())
          {
              serverDoc = await client.GetStringAsync("https://localhost:44381/api/document");
          }
  
          rawContent = serverDoc;
  
          JliffDocument jd;
          JSON.MakeInto(JSON.Load(serverDoc), out jd);
          segments = jd.Segments.Count;
          oneTextString = jd.Segments[0].TargetText;
          jlfDoc = jd;                                  &lt;==== UNCOMMENTED
      }
  }
  </code></pre>
  
  <p>The error in browser tools console is:</p>
  
  <pre><code>WASM: Unhandled exception rendering component:
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM: System.NullReferenceException: Object reference not set to an instance of an object.
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:   at Blazorgrid.Pages.Index.BuildRenderTree (Microsoft.AspNetCore.Components.RenderTree.RenderTreeBuilder builder) [0x00035] in &lt;1cc78bbb60324b879905902bf1175ac2&gt;:0 
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:   at Microsoft.AspNetCore.Components.ComponentBase.&lt;.ctor&gt;b__5_0 (Microsoft.AspNetCore.Components.RenderTree.RenderTreeBuilder builder) &lt;0x20a7d38 + 0x00020&gt; in &lt;13ab8f8dacb6489b93c9655168c56037&gt;:0 
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:   at (wrapper delegate-invoke) &lt;Module&gt;.invoke_void_RenderTreeBuilder(Microsoft.AspNetCore.Components.RenderTree.RenderTreeBuilder)
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch (Microsoft.AspNetCore.Components.Rendering.RenderBatchBuilder batchBuilder, Microsoft.AspNetCore.Components.RenderFragment renderFragment) &lt;0x20a7190 + 0x00092&gt; in &lt;13ab8f8dacb6489b93c9655168c56037&gt;:0 
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:   at Microsoft.AspNetCore.Components.Rendering.Renderer.RenderInExistingBatch (Microsoft.AspNetCore.Components.Rendering.RenderQueueEntry renderQueueEntry) &lt;0x20a6e48 + 0x00036&gt; in &lt;13ab8f8dacb6489b93c9655168c56037&gt;:0 
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:   at Microsoft.AspNetCore.Components.Rendering.Renderer.ProcessRenderQueue () &lt;0x20a3eb8 + 0x00056&gt; in &lt;13ab8f8dacb6489b93c9655168c56037&gt;:0 
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM: Unhandled exception rendering component:
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM: Microsoft.JSInterop.JSException: No element is currently associated with component 6
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM: Error: No element is currently associated with component 6
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:     at e.updateComponent (http://localhost:53239/_framework/blazor.webassembly.js:1:13495)
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:     at Object.t.renderBatch (http://localhost:53239/_framework/blazor.webassembly.js:1:1686)
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:     at window.Blazor._internal.renderBatch (http://localhost:53239/_framework/blazor.webassembly.js:1:30422)
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:     at _mono_wasm_invoke_js_unmarshalled (http://localhost:53239/_framework/wasm/mono.js:1:170240)
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:     at wasm-function[3762]:35
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:     at wasm-function[3770]:572
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:     at wasm-function[3771]:211
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:     at wasm-function[2977]:241
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:     at wasm-function[601]:22615
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:     at wasm-function[601]:21413
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:   at Mono.WebAssembly.Interop.MonoWebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,T2,TRes] (System.String identifier, T0 arg0, T1 arg1, T2 arg2) &lt;0x236bc00 + 0x00044&gt; in &lt;0544639430f948ad82c54a3effb7ea00&gt;:0 
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:   at Mono.WebAssembly.Interop.MonoWebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,TRes] (System.String identifier, T0 arg0, T1 arg1) &lt;0x236bb28 + 0x00016&gt; in &lt;0544639430f948ad82c54a3effb7ea00&gt;:0 
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:   at Microsoft.AspNetCore.Blazor.Rendering.WebAssemblyRenderer.UpdateDisplayAsync (Microsoft.AspNetCore.Components.Rendering.RenderBatch&amp; batch) &lt;0x236ba30 + 0x0001e&gt; in &lt;91b564433c704544acd7894656c3aff9&gt;:0 
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:   at Microsoft.AspNetCore.Components.Rendering.Renderer.ProcessRenderQueue () &lt;0x20a3eb8 + 0x000be&gt; in &lt;13ab8f8dacb6489b93c9655168c56037&gt;:0 
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM: Unhandled exception rendering component:
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM: System.NullReferenceException: Object reference not set to an instance of an object.
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeFrame..ctor (System.Int32 sequence, System.Type componentType, System.Int32 subtreeLength, Microsoft.AspNetCore.Components.Rendering.ComponentState componentState) &lt;0x21001d8 + 0x0001c&gt; in &lt;13ab8f8dacb6489b93c9655168c56037&gt;:0 
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeFrame.WithComponent (Microsoft.AspNetCore.Components.Rendering.ComponentState componentState) &lt;0x2100178 + 0x0001c&gt; in &lt;13ab8f8dacb6489b93c9655168c56037&gt;:0 
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.UpdateRetainedChildComponent (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext&amp; diffContext, System.Int32 oldComponentIndex, System.Int32 newComponentIndex) &lt;0x24c9160 + 0x0004c&gt; in &lt;13ab8f8dacb6489b93c9655168c56037&gt;:0 
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForFramesWithSameSequence (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext&amp; diffContext, System.Int32 oldFrameIndex, System.Int32 newFrameIndex) &lt;0x24b9610 + 0x00368&gt; in &lt;13ab8f8dacb6489b93c9655168c56037&gt;:0 
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.AppendDiffEntriesForRange (Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder+DiffContext&amp; diffContext, System.Int32 oldStartIndex, System.Int32 oldEndIndexExcl, System.Int32 newStartIndex, System.Int32 newEndIndexExcl) &lt;0x20a9950 + 0x000ae&gt; in &lt;13ab8f8dacb6489b93c9655168c56037&gt;:0 
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:   at Microsoft.AspNetCore.Components.RenderTree.RenderTreeDiffBuilder.ComputeDiff (Microsoft.AspNetCore.Components.Rendering.Renderer renderer, Microsoft.AspNetCore.Components.Rendering.RenderBatchBuilder batchBuilder, System.Int32 componentId, Microsoft.AspNetCore.Components.RenderTree.ArrayRange`1[T] oldTree, Microsoft.AspNetCore.Components.RenderTree.ArrayRange`1[T] newTree) &lt;0x20a9558 + 0x0009e&gt; in &lt;13ab8f8dacb6489b93c9655168c56037&gt;:0 
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch (Microsoft.AspNetCore.Components.Rendering.RenderBatchBuilder batchBuilder, Microsoft.AspNetCore.Components.RenderFragment renderFragment) &lt;0x20a7190 + 0x0013a&gt; in &lt;13ab8f8dacb6489b93c9655168c56037&gt;:0 
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:   at Microsoft.AspNetCore.Components.Rendering.Renderer.RenderInExistingBatch (Microsoft.AspNetCore.Components.Rendering.RenderQueueEntry renderQueueEntry) &lt;0x20a6e48 + 0x00036&gt; in &lt;13ab8f8dacb6489b93c9655168c56037&gt;:0 
  d.printErr @ blazor.webassembly.js:1
  blazor.webassembly.js:1 WASM:   at Microsoft.AspNetCore.Components.Rendering.Renderer.ProcessRenderQueue () &lt;0x20a3eb8 + 0x00056&gt; in &lt;13ab8f8dacb6489b93c9655168c56037&gt;:0 
  d.printErr @ blazor.webassembly.js:1
  </code></pre>