Data table issue - ERROR TypeError: val.slice is not a function

Question

ERROR TypeError:

val.slice is not a function

dataTable configuration

$.p-dataTable #dt [value]="customers" [(selection)]="chkBoxSelect" 
 dataKey="customerId" [rows]="10" [paginator]="true" 
 paginatorPosition="both" [pageLinks]="5" [rowsPerPageOptions]="[5,10,20]" 
 [globalFilter]="gb" [headerCheckboxToggleAllPages]="false" 
 [editable]="true" exportFilename="customers" [lazy]="true" 
 [totalRecords]="totalRecords" onLazyLoad)="loadCustomersByPage($event)"

Call back function

$loadCustomersByPage(event: LazyLoadEvent) {

    const parameters = "?page=" + event.first + "&size=" + (event.first + event.rows);

     this._cs.findAllActiveCustomerDetailsByPage(parameters).subscribe(
       (data: any) => {
         this.customers = data;
       },
       (error) => {
          console.log("--error--" + error)
       }
  );
}

Answer 1

Looks like the data is not formatted correctly ..

This is how your data object assigned to the table should look like:

let cars = [
   {"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
   {"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"},
   {"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"},
   {"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"},
   {"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"},
   {"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"},
   {"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"},
   {"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"},
   {"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"},
   {"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"}
]