Angular - MatTable not displaying data

Question

I have issues displaying data from one of the JSON object it get from my client. I see only the header data. I am not clear what am i missing.

I checked the JSON file sent by the client, it is good.

TS File Code:

import { Component, OnInit, Input } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-list-student',
  templateUrl: './list-student.component.html',
  styleUrls: ['./list-student.component.css']
})
export class ListStudentComponent implements OnInit {
    studentData: any;   
    headerColumns: string[] = ["FIRST_NAME", "LAST_NAME", "DOB_DATE"];
    dataSource = new MatTableDataSource([]);
    summaryTableConfig = [
        {
          'headerValue' : 'First Name', 
          'columnValue' : 'FIRST_NAME',
        },
        {
          'headerValue' : 'Last Name', 
          'columnValue' : 'LAST_NAME',
        },
        {
          'headerValue' : 'DOB', 
          'columnValue' : 'DOB_DATE',
        }
    ];
    
    constructor() { }

  ngOnInit() {
    this.studentData = {"header": {"columnsMap": {"DOB_DATE": "12/12/1942","FIRST_NAME": "JOHN","LAST_NAME": "DOE"}}};
    this.dataSource = new MatTableDataSource;
    this.dataSource.data = this.studentData;
  }
}

HTML Code

                        <mat-table [dataSource]="dataSource">
                            <ng-container *ngFor="let data of summaryTableConfig" [matColumnDef]="data.columnValue">
                                <mat-header-cell *matHeaderCellDef>
                                    <span>{{ data.headerValue }}</span>
                                </mat-header-cell>
                                <mat-cell  *matCellDef="let element">
                                    <span>{{element["columnsMap"][data.columnValue]}}</span>
                                </mat-cell>
                            </ng-container>
                            <mat-header-row *matHeaderRowDef="headerColumns"></mat-header-row>
                            <mat-row *matRowDef="let row; columns: headerColumns;"></mat-row>
                        </mat-table>

https://stackblitz.com/ create sample code which you working on it. — Avinash Dalvi, Aug 07 '20 at 20:06
https://stackblitz.com/edit/angular-mat-table-design fork this and add your code — Avinash Dalvi, Aug 07 '20 at 20:24
https://angular-mat-table-design-bl2v7t.stackblitz.io Hope this helps — Ragu, Aug 07 '20 at 20:29
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/219435/discussion-between-ragu-and-aviboy2006). — Ragu, Aug 07 '20 at 20:36

score 0 · Answer 1 · answered Aug 07 '20 at 19:58

If you check the error log, you should see "Cannot read property 'columnsMap' of undefined".

Here's what happens. You initialize studentData with:

{"Students": 
  {"student": 
    [
      {"header": 
        {"columnsMap": 
          {"DOB_DATE": "12/12/1942","FIRST_NAME": "JOHN","LAST_NAME": "DOE"}
        }
      }
    ]
  }
}

Then you traverse studentData via this.studentData["Students"]["student"]["header"]["columnsMap"] which is equivalent to this.studentData.Students.student.header.columnsMap.

The problem is that student is an array. Thus this.studentData.Students.student.header is undefined and you cannot read columnsMap of undefined.

To test, you could write this.studentData.Students.student[0].header.columnsMap. This should get you a table with 1 row.

aeberhart, That worked. My mistake was that i get the following data to my component is this.studentData = {"header": {"columnsMap": {"DOB_DATE": "12/12/1942","FIRST_NAME": "JOHN","LAST_NAME": "DOE"}}}; I updated my question. — Ragu, Aug 07 '20 at 20:02
No even now i see only the column header. It is not solved. Please check my updated code. — Ragu, Aug 07 '20 at 20:12

Angular - MatTable not displaying data

1 Answers1