Error - TypeError: data.slice is not a function

Question

Hi

  I am getting error - TypeError: data.slice is not a function
    at MatTableDataSource._orderData (table.mjs:1245:31)
    at table.mjs:1213:93
    at map.js:7:37
    at OperatorSubscriber2._this._next (OperatorSubscriber.js:15:21)
    at Subscriber2.next (Subscriber.js:34:18)
    at combineLatest.js:47:40
    at OperatorSubscriber2._this._next (OperatorSubscriber.js:15:21)
    at Subscriber2.next (Subscriber.js:34:18)
    at mergeInternals.js:25:28
    at OperatorSubscriber2._this._next (OperatorSubscriber.js:15:21)
handleError @ core.mjs:6531
Show 1 more frame
Show less

import { Component,OnInit,ViewChild } from '@angular/core';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatIconModule} from '@angular/material/icon';
import {MatButtonModule} from '@angular/material/button';
import {MatDialog, MatDialogModule} from '@angular/material/dialog'; 
import { EmpAddEditComponent } from '../emp-add-edit/emp-add-edit.component';
import {MatPaginator, MatPaginatorModule} from '@angular/material/paginator';
import {MatSort, MatSortModule} from '@angular/material/sort';
import {MatTableDataSource, MatTableModule} from '@angular/material/table';
import {MatFormFieldModule} from '@angular/material/form-field'; 
import {MatInputModule} from '@angular/material/input'; 
import {  Observable, throwError } from 'rxjs'; 
import { Injectable } from '@angular/core';

@Component({
  selector: 'app-layout',
  standalone: true,
  imports: [MatFormFieldModule,MatIconModule,MatButtonModule,MatInputModule,MatToolbarModule,MatTableModule, MatSortModule, MatPaginatorModule],
  templateUrl: './layout.component.html',
  styleUrl: './layout.component.css'
})
export class LayoutComponent implements OnInit {
  displayedColumns: string[] = ['id', 'empName', 'empContactNo', 'empEmail'];
  dataSource!: MatTableDataSource<any>;

  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;

  constructor(private _dialog:MatDialog){}
  openAddEditForm(){
    this._dialog.open(EmpAddEditComponent)
  }
  ngOnInit(): void {
    this.getallEmployee();
  }

  getallEmployee() {
    this.htp.get('onlinetestapi.gerasim.in/api/TeamSync/GetAllEmployee').subscribe((result: any)=>{
    this.dataSource = new MatTableDataSource(result);
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  })
}
  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }
}

<!-- <p>layout works!</p> -->

<mat-toolbar color="primary">
    <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
      <mat-icon>menu</mat-icon>
    </button>
    <span>Crud Application</span>
    <span class="example-spacer"></span>
    <button mat-raised-button (click)="openAddEditForm()">
      <!-- <mat-icon>favorite</mat-icon> -->
      ADD EMPLOYEE
    </button>

  </mat-toolbar>

  <mat-form-field>
    <mat-label>Filter</mat-label>
    <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
  </mat-form-field>
  
  <div class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource" matSort>
  
      <!-- ID Column -->
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
        <td mat-cell *matCellDef="let row"> {{row.id}} </td>
      </ng-container>
  
      <!-- Progress Column -->
      <ng-container matColumnDef="empName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> First Name </th>
        <td mat-cell *matCellDef="let row"> {{row.empName}}% </td>
      </ng-container>
  
      <!-- Name Column -->
      <ng-container matColumnDef="empContactNo">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Contact No </th>
        <td mat-cell *matCellDef="let row"> {{row.empContactNo}} </td>
      </ng-container>
  
      <!-- Fruit Column -->
      <ng-container matColumnDef="empEmail">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
        <td mat-cell *matCellDef="let row"> {{row.empEmail}} </td>
      </ng-container>
  
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  
      <!-- Row shown when there is no matching data. -->
      <tr class="mat-row" *matNoDataRow>
        <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
      </tr>
    </table>
  
    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
  </div>

 

Thanks