How to print a json object to a Mat table?

Question

I am trying to print an http respone to a mat table. I have problem to format the data to an array and set it to mat-datasource. can someone please guide me.

[
{
"n1":"abcd",
"n2":"abcde",
"A1":
{
"A11":{"t":b1},
"A12":{"t1":b2},
"A13":{"t":b3},
"A14":{"t":b4},
"A15":{"t":b5}}
},
{
"n2":"bcde",
"n2":"bcdef",
"A1":
{
"A11":{"t":b1,"t1":b2},
"A12":{"t":b3},
"A13":{"t":b4},
"A14":{"t":b5},
"A15":{"t":b6}
}
}
}
]

Mat table should look like this.

---------------------------------------------------
| data   | A11  | A12     |A13   | A14   | A15     |
---------------------------------------------------
| n1,n2  |  t   |     t   |   t  |    t  |   t     |
---------------------------------------------------
| n1,n2  |  t   |     t   |   t  |    t  |   t     |
---------------------------------------------------

i have tried below but unable to set the sub values(A11, A12, A13, A14, A15) to an array

ngOnInit() {
this.gService.getlist().subscribe(
      (res: any[]) => {
        let GL = new Array();
        res.forEach(gl => {
          GL.push({
            n1: gl.n1,
            n2: gl.n2,
            A1: gl.A1,
// unable to read other json values part of A1.

          })
        })
this.datasource.data = GL;
}

````

Have you tried with gl.A1.A11.t or gl.A1["A11"]["t"]??

Sergio
– Sergio

2020-05-25 08:05:39 +00:00
Commented May 25, 2020 at 8:05 — Sergio
– Sergio, Commented May 25, 2020 at 8:05
Could you create a stackblitz.com example?

StepUp
– StepUp

2020-05-25 08:25:12 +00:00
Commented May 25, 2020 at 8:25 — StepUp
– StepUp, Commented May 25, 2020 at 8:25

Barremian · Accepted Answer · 2020-05-25 08:47:38Z

I am not sure how you've defined the template. But the following seems to work. Note that I am using bracket notation. It should in theory also work with the dot notation, but the TS Lint might throw some errors.

Controller

export class AppComponent  {
  name = 'Angular 5';
  displayedColumns = ['data', 'a11', 'a12', 'a13', 'a14', 'a15'];
  dataSource: any;
  inputData = [];

  constructor() {
    SOURCE_DATA.forEach(data => {
      this.inputData.push(
        {
          data: data['n1'] + ', ' + data['n2'], 
          A11: data['A1']['A11']['t'], 
          A12: data['A1']['A12']['t'] || data['A1']['A12']['t1'], 
          A13: data['A1']['A13']['t'], 
          A14: data['A1']['A14']['t'], 
          A15: data['A1']['A15']['t']
        }
      );
    });
    this.dataSource = new MatTableDataSource<any>(this.inputData);
  }
}

Template

<ng-container *ngIf="dataSource">
  <div class="example-container mat-elevation-z8">
    <mat-table #table [dataSource]="dataSource">

      <ng-container matColumnDef="data">
        <mat-header-cell *matHeaderCellDef> Data </mat-header-cell>
        <mat-cell *matCellDef="let a"> {{a.data}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="a11">
        <mat-header-cell *matHeaderCellDef> A11 </mat-header-cell>
        <mat-cell *matCellDef="let a"> {{a.A11}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="a12">
        <mat-header-cell *matHeaderCellDef> A12 </mat-header-cell>
        <mat-cell *matCellDef="let a"> {{a.A12}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="a13">
        <mat-header-cell *matHeaderCellDef> A13 </mat-header-cell>
        <mat-cell *matCellDef="let a"> {{a.A13}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="a14">
        <mat-header-cell *matHeaderCellDef> A14 </mat-header-cell>
        <mat-cell *matCellDef="let a"> {{a.A14}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="a15">
        <mat-header-cell *matHeaderCellDef> A15 </mat-header-cell>
        <mat-cell *matCellDef="let a"> {{a.A15}} </mat-cell>
      </ng-container>

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

Working example: Stackblitz

Hey, Thanks for your help. When i implemented the above way, i got the following error. " ERROR TypeError: Cannot read property '"A11" of undefined". what can be the problem.
Please check if the property A11 exists in the source object.

Collectives™ on Stack Overflow

How to print a json object to a Mat table?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related