title: Display nested JSON data on Angular Material Table
body: <p>The Json file has following format -</p>
  
  <pre><code>{
  "products": {
  
      "items":[
        {
          "productId": "1",
          "dept": "home",
          "itemtype": "small"
        },
        {
         "productId": "2",
          "dept": "kitchen",
          "itemtype": "medium"
        }
         ] }}
  </code></pre>
  
  <p>This is suppose to display on a material table, I can see the data has passed as shows in the console, but not visible in the material table.</p>
  
  <pre><code>&lt;table mat-table [dataSource]="dataSource" class="mat-elevation-z8" &gt;
  &lt;ng-container matColumnDef="productId" &gt;
     &lt;th mat-header-cell *matHeaderCellDef&gt; ID&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element "&gt;{{element.productId}}  
     &lt;/td&gt;
   &lt;/ng-container&gt;
  &lt;ng-container matColumnDef="dept" &gt;
     &lt;th mat-header-cell *matHeaderCellDef&gt; department&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element "&gt;{{element.dept}}  
     &lt;/td&gt;
   &lt;/ng-container&gt;
   &lt;ng-container matColumnDef="itemtype" &gt;
     &lt;th mat-header-cell *matHeaderCellDef&gt; Item type&lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element "&gt;{{element.itemtype}}  
     &lt;/td&gt;
   &lt;/ng-container&gt;
    &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
   &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>