Need to display Nested JSON Object in Material Data Table

Question

I need to display nested JSON Object coming from my backend as the column fields of my MatTableDataSource.

This is my JSON Object:

[{
    "workstationId": 100,
    "assemblylineId": 100,
    "workstationDescription": "Testing1",
    "workstationTest": "Yes",
    "createdAt": "2019-03-20",
    "updatedAt": "2019-03-20",
    "assemblylines": [{
      "assemblylineName": "assembly1"
    }]
  },
  {
    "workstationId": 101,
    "assemblylineId": 100,
    "workstationDescription": "workstation1",
    "workstationTest": "No",
    "createdAt": "2019-04-04",
    "updatedAt": "2019-04-04",
    "assemblylines": [{
      "assemblylineName": "assembly5"
    }]
  },
  {
    "workstationId": 102,
    "assemblylineId": 101,
    "workstationDescription": "workstation2",
    "workstationTest": "No",
    "createdAt": "2019-04-04",
    "updatedAt": "2019-04-04",
    "assemblylines": [{
      "assemblylineName": "assembly4"
    }]
  },
  {
    "workstationId": 103,
    "assemblylineId": 102,
    "workstationDescription": "Testing2",
    "workstationTest": "Yes",
    "createdAt": "2019-04-04",
    "updatedAt": "2019-04-04",
    "assemblylines": [{
      "assemblylineName": "assembly3"
    }]
  }
]

This is my UI: MatTableDataSource

This is my workstation.model.ts

export interface Workstation {
  workstationId: number;
  workstationDescription: string;
  workstationTest: string;
  assemblylines: {
    assemblylineName: string;
  };
}

I have checked tutorials of JSON Object Destructuring, Parsing, Stringifying but I'm not getting there as the service is returning Workstation[] object instead of Workstation object. Kindly let me know if there's a way I can display assemblylineName property as a column with its values.

can you just show in which format you want to display your displaylines in ui? just rough mockup so that i can assist you accordingly — Fahad Subzwari
– Fahad Subzwari, Commented Apr 4, 2019 at 8:49
I want to display the names of Assemblies my workstations belong to. The data is fetched as a nested JSON object and I need to display the second level: assemblylineName property as the first level. @FahadHassanSubzwari — Rachit
– Rachit, Commented Apr 4, 2019 at 9:07
So what if there will be multiple assemblylines so do you want to display all asemblylines names in a single column(td)? — Fahad Subzwari
– Fahad Subzwari, Commented Apr 4, 2019 at 9:09
No, the JSON object is returned after the join I called upon both tables. Workstations can only belong to one Assembly line. — Rachit
– Rachit, Commented Apr 4, 2019 at 9:15

Csaba · Accepted Answer · 2019-04-04 09:13:39Z

1

You can do something like this:

.html

         <mat-table #table [dataSource]="workstationDataSource">

                // SR NUMBER
                <ng-container matColumnDef="sr_no">
                  <mat-header-cell *matHeaderCellDef>Sr. No.</mat-header-cell>
                  <mat-cell *matCellDef="let row">
                    <span>{{ row.workstationId }}</span>
                  </mat-cell>
                </ng-container>

                // DESCRIPTION
                <ng-container matColumnDef="description">
                  <mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
                  <mat-cell *matCellDef="let row">
                    <span>{{ row.workstationDescription}}</span>
                  </mat-cell>
                </ng-container>

                // TEST
                <ng-container matColumnDef="test">
                  <mat-header-cell *matHeaderCellDef>Test</mat-header-cell>
                  <mat-cell *matCellDef="let row">
                    <span>{{ row.workstationTest}}</span>
                  </mat-cell>
                </ng-container>

                // ASSEMBLY LINES
                <ng-container matColumnDef="assembly_lines">
                  <mat-header-cell *matHeaderCellDef>Assembly Line</mat-header-cell>
                  <mat-cell *matCellDef="let row">
                    <span>{{ row.assemblylines.assemblylineName }}</span>
                  </mat-cell>
                </ng-container>

                // ACTIONS
                <ng-container matColumnDef="actions">
                  <mat-header-cell *matHeaderCellDef></mat-header-cell>
                  <mat-cell *matCellDef="let row">
                    <button (click)="edit(row)">EDIT</button>
                    <button (click)="delete(row)">DELETE</button>                    
                  </mat-cell>
                </ng-container>

                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

          </mat-table>

.ts

...
displayedColumns = [
  'sr_no',
  'description',
  'test',
  'assembly_lines',
  'actions'
];
workstationDataSource: MatTableDataSource<Workstation>;
...

// then you will need to populate the 'workstationDataSource' variable
getWorkstations() {
  this.http.get(...).subscribe(res => {
    ...
    this.workstationDataSource.data = new MatTableDataSource<Workstation>();
    this.workstationDataSource.data = res;
    ...
  });
}
...

Hope that helps.

answered Apr 4, 2019 at 9:13

Csaba

2,1064 gold badges30 silver badges51 bronze badges

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

3 Comments

Rachit Over a year ago

Thank you @Csaba but I did try that approach. It shows blank data.

Csaba Over a year ago

You are welcome. any error messages in the console?

Rachit Over a year ago

There wasn't. I didn't mention the index of assemblylineName in square brackets. Thank you once again.

Collectives™ on Stack Overflow

Need to display Nested JSON Object in Material Data Table

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related