Display nested JSON data on Angular Material Table

Question

The Json file has following format -

{
"products": {

    "items":[
      {
        "productId": "1",
        "dept": "home",
        "itemtype": "small"
      },
      {
       "productId": "2",
        "dept": "kitchen",
        "itemtype": "medium"
      }
       ] }}

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.

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" >
<ng-container matColumnDef="productId" >
   <th mat-header-cell *matHeaderCellDef> ID</th>
    <td mat-cell *matCellDef="let element ">{{element.productId}}  
   </td>
 </ng-container>
<ng-container matColumnDef="dept" >
   <th mat-header-cell *matHeaderCellDef> department</th>
    <td mat-cell *matCellDef="let element ">{{element.dept}}  
   </td>
 </ng-container>
 <ng-container matColumnDef="itemtype" >
   <th mat-header-cell *matHeaderCellDef> Item type</th>
    <td mat-cell *matCellDef="let element ">{{element.itemtype}}  
   </td>
 </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
 <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Maniraj Murugan · Accepted Answer · 2020-03-10 02:25:10Z

1

You need to make the JSON into a variable like,

const jsonData = {
"products": {
    "items":[
      {
        "productId": "1",
        "dept": "home",
        "itemtype": "small"
      },
      {
       "productId": "2",
        "dept": "kitchen",
        "itemtype": "medium"
      }
    ] 
  }
}

Then the datasource needs to be declared with array items like,

dataSource = jsonData.products.items;

And sisplay columns with properties like,

  displayedColumns = ['productId', 'dept', 'itemtype'];

And HTML template refering these properties,

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <ng-container matColumnDef="productId">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let element"> {{element.productId}} </td>
  </ng-container>

  <ng-container matColumnDef="dept">
    <th mat-header-cell *matHeaderCellDef> department </th>
    <td mat-cell *matCellDef="let element"> {{element.dept}} </td>
  </ng-container>

  <ng-container matColumnDef="itemtype">
    <th mat-header-cell *matHeaderCellDef> Item type </th>
    <td mat-cell *matCellDef="let element"> {{element.itemtype}} </td>
  </ng-container>


  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Working material table Stackblitz

answered Mar 10, 2020 at 2:25

Maniraj Murugan

9,11424 gold badges77 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Sz2013 Over a year ago

I have the json file saved locally, hence as I have mentioned. So does it needs to be updated with const jsonData ? Sorry but I am totally new and lost. help please.

Sz2013 Over a year ago

My project has a json file saved locally under the assets folder, just to confirm.

Maniraj Murugan Over a year ago

@Sz2013, Here you go stackblitz.com/edit/… .. I have stored the json inside assets folder as config.json then used service as config.service.ts and called the json through http then subscribed in app.component.ts then retrieve the data and store it to dataSource ..

Sz2013 Over a year ago

thanks a lot. Just a question , it seems it is not getting 'product' properly as says 'Property 'products' does not exist on type 'Object'.' Also I didn't quite understand the use of Hello ts.

Maniraj Murugan Over a year ago

@Sz2013, You can replace the data.products.items with data['products'].items and also please ignore all other files except app component and module The exact code actually lies in this app only ..

|

Bhargav Rao · Accepted Answer · 2020-03-10 05:14:38Z

0

The dataSource must be an array (in your case is products['items']).

edited Mar 10, 2020 at 5:14

Bhargav Rao

52.6k29 gold badges130 silver badges142 bronze badges

answered Mar 10, 2020 at 2:07

Nguyễn Viết Thành Chương

1

Collectives™ on Stack Overflow

Display nested JSON data on Angular Material Table

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related