CODEWITHSUNDEEP
javascriptangular
RxDev
RxDev

Reputation: 295

Cannot read property 'toLowerCase' of undefined Angular 5

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?

Upvotes: 0

Views: 2015

Answers (2)

stukilgore
stukilgore

Reputation: 101

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.

Upvotes: 1

DeborahK
DeborahK

Reputation: 60518

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;
}

Upvotes: 1

Related Questions