Asp.net Core response to Angular Material Table

Question

How do I populate Material Design Table data that comes from Asp.net core

This is my Html code

<div>
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
      <ng-container matColumnDef="emp_Id">
        <th mat-header-cell *matHeaderCellDef> Emp_Id </th>
        <td mat-cell *matCellDef="let element"> {{element.emp_Id}} </td>
      </ng-container>

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

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

      <ng-container matColumnDef="actualLogout">
        <th mat-header-cell *matHeaderCellDef> Actual Logout </th>
        <td mat-cell *matCellDef="let element"> {{element.actualLogout}} </td>
      </ng-container>
      <ng-container matColumnDef="shiftLogin">
        <th mat-header-cell *matHeaderCellDef> Shift Login </th>
        <td mat-cell *matCellDef="let element"> {{element.shiftLogin}} </td>
      </ng-container>
      <ng-container matColumnDef="shiftLogout">
        <th mat-header-cell *matHeaderCellDef> Shift Logout </th>
        <td mat-cell *matCellDef="let element"> {{element.shiftLogout}} </td>
      </ng-container>
      <ng-container matColumnDef="bioLogin">
        <th mat-header-cell *matHeaderCellDef> Bio Login </th>
        <td mat-cell *matCellDef="let element"> {{element.bioLogin}} </td>
      </ng-container>
      <ng-container matColumnDef="bioLogout">
        <th mat-header-cell *matHeaderCellDef> Bio Logout </th>
        <td mat-cell *matCellDef="let element"> {{element.bioLogout}} </td>
      </ng-container>
      <ng-container matColumnDef="remarks">
        <th mat-header-cell *matHeaderCellDef> Remarks </th>
        <td mat-cell *matCellDef="let element"> {{element.remarks}} </td>
      </ng-container>
      <ng-container matColumnDef="date">
        <th mat-header-cell *matHeaderCellDef> Date </th>
        <td mat-cell *matCellDef="let element"> {{element.date}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <mat-paginator [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons></mat-paginator>
  </div>

And this is the code for my component class

export class DataCorrectionComponent implements OnInit {
  ELEMENT_DATA: DataCorrectionElement[]
  displayedColumns: string[] = ['emp_Id', 'emp_Name', 'actualLogin', 'actualLogout', 'shiftLogin',
            'shiftLogout', 'bioLogin', 'bioLogout', 'remarks', 'date'];
  dataSource = new MatTableDataSource(this.ELEMENT_DATA);

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  list: DataCorrectionElement[];

  form = new FormGroup({
    StartDate: new FormControl(),
    EndDate: new FormControl()
  });

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  onSubmit() {
    this.http.post('http://localhost:5000/api/DataCorrection/DataCorrection', this.form.value)
    .toPromise()
    .then(res => {
      this.list = res as this.list = res as DataCorrectionElement[];
      });

      console.log(this.list);
      this.dataSource = new MatTableDataSource(this.list);
  }

}

And this is the Model

export interface DataCorrectionElement {
  emp_Name: string;
  emp_Id: number;
  actualLogin: string;
  actualLogout: string;
  shiftLogin: string;
  shiftLogout: string;
  bioLogin: string;
  bioLogout: string;
  remarks: string;
  date: string;
}

I have a code

console.log(this.list);

Which I am expecting to return a list of Data that came from asp.net core. But on my console, I am receiving undefined but the Network tab returns a value

something like this

{"emp_Name":"Some Name","emp_Id":1403,
"actualLogin":"04:59:01","actualLogout":"18:02:55",
"shiftLogin":"06:00:00",
"shiftLogout":"14:00:00"
,"bioLogin":""
,"bioLogout":"","remarks":"Overtime","date":"2019-04-01T00:00:00Z"}

What is the problem with my code? Why does the return of the console show undefined

And how do I properly populate the table and set the list as data source to the table?

score 1 · Accepted Answer · answered Apr 08 '19 at 07:58

Your console.log statement is outside of .then

onSubmit() {
this.http.post('http://localhost:5000/api/DataCorrection/DataCorrection', 
 this.form.value)
   .toPromise()
   .then(res => {
     this.list = res as this.list = res as DataCorrectionElement[];
     // update datasource after response is received.
     console.log(this.list);
     this.dataSource =  new MatTableDataSource(this.list)
  });

  console.log(this.list); // returns undefined
  this.dataSource = new MatTableDataSource(this.list);
}

I didn't notice it. I'm too dumb :( – mecocopy Apr 08 '19 at 08:50 — mecocopy, Apr 08 '19 at 08:50

score 0 · Answer 2 · answered Apr 08 '19 at 08:03

I you need set the dataSource when you get the data, since http is async, it will be assing the datasource with the undefined value.

  onSubmit() {
    this.http.post('http://localhost:5000/api/DataCorrection/DataCorrection', this.form.value)
    .toPromise()
    .then(res => {
      /*Here you assigning the value when its recieved*/
      this.dataSource = new MatTableDataSource(res);
      });

   /*if you do it here, you will get undefined, since the value isnt recieved yet*/
  }

Asp.net Core response to Angular Material Table

2 Answers2