title: How to display nested json arrays into html table with material angular
body: <p>I am trying to display a nested json array into my material angular table. My data works fine if my json does not have nested arrays.</p>
  
  <p><strong>Json</strong> </p>
  
  <pre><code>{
  "rows": [
      {
          "mst": {
              "field": "createDate",
              "value": "2017-06-02"
          },
          "gsc": {
              "field": "Account/Audit/Creation/Date",
              "value": "2017-06-02"
          }
      },
      {
          "mst": {
              "field": "startDate"
          },
          "gsc": {
              "field": "startDate"
          }
      },
      {
          "mst": {
              "field": "status",
              "value": "ACTIVE"
          },
          "gscs": [
              {
                  "field": "Account/LineOfBusiness/Type~Status",
                  "value": "C~A"
              },
              {
                  "field": "Account/LineOfBusiness/Type~Status",
                  "value": "I~A"
              }                
          ],
          "gscvalue": "Active"
      },
      {
          "mst": {
              "field": "statusDate"
          },
          "gsc": {
              "field": "statusDate"
          }
      },
      {
          "mst": {
              "field": "statusReason"
          },
          "gsc": {
              "field": "statusReason"
          }
      },
      {
          "mst": {
              "field": "deliveryMethod",
              "value": "PAPER"
          },
          "gscs": [
              {
                  "field": "Electronic",
                  "value": "N"
              },
              {
                  "field": "ElectronicOutsourced",
                  "value": "N"
              },
              {
                  "field": "Hardcopy",
                  "value": "Y"
              }
          ],
          "gscvalue": "Paper"
      },
      {
          "mst": {
              "field": "statementFormat",
              "value": "Standard"
          },
          "gsc": {
              "field": "?"
          }
      },
      {
          "mst": {
              "field": "statementLanguagePreference",
              "value": "Spanish"
          },
          "gsc": {
              "field": "Account/Language",
              "value": "S"
          },
          "gscvalue": "Spanish"
      },
      {
          "mst": {
              "field": "type",
              "value": "RES"
          },
          "gsc": {
              "field": "Account/Type",
              "value": "RES"
          }
      }
  ]
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="example-container mat-elevation-z8" *ngIf="rows?.length&gt;0"&gt;
  &lt;table mat-table [dataSource]="dataSource"&gt;
  
  &lt;ng-container matColumnDef="mst Fields"&gt;
    &lt;th mat-header-cell *matHeaderCellDef&gt; mst Fields &lt;/th&gt;
    &lt;td mat-cell *matCellDef="let row" class="tablePadding"&gt; {{row.mst.field}} &lt;/td&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-container matColumnDef="mst"&gt;
    &lt;th mat-header-cell *matHeaderCellDef&gt; mst value &lt;/th&gt;
    &lt;td mat-cell *matCellDef="let row"&gt; {{row.mst.value}} &lt;/td&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-container matColumnDef="gsc Fields"&gt;
    &lt;th mat-header-cell *matHeaderCellDef&gt; gsc Fields &lt;/th&gt;
    &lt;td mat-cell *matCellDef="let row"&gt; {{row.gsc.field}} &lt;/td&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-container matColumnDef="gsc"&gt;
    &lt;th mat-header-cell *matHeaderCellDef&gt; gsc value &lt;/th&gt;
    &lt;td mat-cell *matCellDef="let row"&gt; {{row.gsc.value}} &lt;/td&gt;           
  &lt;/ng-container&gt;
  
  &lt;tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"&gt;&lt;/tr&gt;
  &lt;tr mat-row *matRowDef="let row; columns: displayedColumns; let row"&gt;&lt;/tr&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>modal.ts</strong></p>
  
  <pre><code>export class ResultField {
  field: string;
  value: string;
  valueList: string[];
  }
  
  export class ResultRow {
  mst: ResultField;
  gsc: ResultField;
  gscs: ResultField[];
  gscValue: String;
  }
  </code></pre>
  
  <p>My current table will display data all the way up until it reaches mst.field{status}. I get an error </p>
  
  <pre><code>SystemComponent.html:29 ERROR TypeError: Cannot read property 'field' of undefined
  </code></pre>
  
  <p>I understand this error is coming because of my current logic in my html. How can I resolve this?</p>
  
  <p>Hence, I don't want gscs.field in a separate column I want those values into gsc.field column and the gscValue in the gsc.value column.</p>
  
  <p><strong>Attempt</strong></p>
  
  <pre><code>&lt;ng-container matColumnDef="gsc Fields"&gt;
    &lt;th mat-header-cell *matHeaderCellDef&gt; gsc Fields &lt;/th&gt;
    &lt;td mat-cell *matCellDef="let row" *ngIf="row.gsc.field"&gt; {{row.gsc.field}} &lt;/td&gt;
  &lt;td mat-cell *matCellDef="let row" *ngIf="row.gsc.field"&gt; {{row.gscs.field}} &lt;/td&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p>But with angular logic there can only be one * directives in a tag.</p>
  
  <p>My closest reference is <a href="https://stackoverflow.com/questions/55511432/need-to-display-nested-json-object-in-material-data-table">Need to display Nested JSON Object in Material Data Table</a>
  but there were no solid answers.</p>
  
  <p><strong>Attempt 2</strong></p>
  
  <p>I tried using a simpler approach just to get my data printed. </p>
  
  <pre><code>&lt;div&gt;
    &lt;h1&gt;Testing&lt;/h1&gt;
  
    &lt;div *ngFor="let row of rows"&gt;
      &lt;!-- &lt;p *ngIf="row.gsc.field"&gt;{{row.gsc.field}}&lt;/p&gt;
      &lt;p *ngIf="row.gsc.value"&gt;{{row.gsc.value}}&lt;/p&gt; --&gt;
      &lt;p&gt;{{row.mst.field}}&lt;/p&gt;
      &lt;p&gt;{{row.mst.value}}&lt;/p&gt;   
  
  
    &lt;div *ngFor= "let gscs of row.gscs"&gt;
      &lt;p *ngIf="gscs.field"&gt;{{gscs.field}}&lt;/p&gt;
      &lt;p *ngIf="gscs.value"&gt;{{gscs.value}}&lt;/p&gt;
  &lt;/div&gt;
  &lt;p *ngIf = "row.gscvalue"&gt;{{row.gscvalue}}&lt;/p&gt;
    &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>With this code snippet, I am able to pull the nested values however I am getting the same error as above when I uncomment these two lines.</p>
  
  <pre><code>&lt;!-- &lt;p *ngIf="row.gsc.field"&gt;{{row.gsc.field}}&lt;/p&gt;
  &lt;p *ngIf="row.gsc.value"&gt;{{row.gsc.value}}&lt;/p&gt; --&gt;
  </code></pre>
  
  <p>ERROR TypeError: Cannot read property 'field' of undefined</p>
  
  <p>With the JSON I provided above, I want to create a table that looks like this following picture. </p>
  
  <p><a href="https://i.stack.imgur.com/0eruh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0eruh.png" alt="Final Output"></a></p>