Cannot read property 'toLowerCase' of undefined Angular 5

Question

I am trying to filter a column of a ngx-table I follow the the example but it keeps giving that error "Cannot read property 'toLowerCase' of undefined"

here's the template part

<ngx-datatable-column name="Nom" class="name">
  <ng-template ngx-datatable-cell-template let-value="value">
    {{value}}
  </ng-template>
</ngx-datatable-column>

and the function attached to it

updateFilter(event) {
const val = event.target.value.toLowerCase();

// filter the data
const temp = this.temp.filter(function(d) {
  return d.name.toLowerCase().indexOf(val) !== -1 || !val;
});

// update the rows
this.rows = temp;
// Whenever the filter changes, always go back to the first page
this.table.offset = 0;}

Any idea of how to solve this?

Answer 1

It would appear that the the items being filtered through do not all contain a value 'name' within them. Try console.log(d) before your return within that function to verify you are receiving the data you expect.

Answer 2

It appears that your name property must be undefined in some cases. This could be that it is not the correct property name (is it lastName instead of name?) or that for some objects in the temp array that the value is undefined. In either case, you can check for a null first before returning the value.

if (d.name) {
  return d.name.toLowerCase().indexOf(val) !== -1 || !val;
} else {
  return null;
}