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?

Possible duplicate of [Javascript "cannot read property "bar" of undefined](https://stackoverflow.com/questions/8004617/javascript-cannot-read-property-bar-of-undefined) — Igor, Feb 27 '18 at 18:26
@DeborahK, you're right. I misunderstood the explanation of _safe navigator operator_. Here it is a [related post](https://stackoverflow.com/questions/40238144/typescript-the-safe-navigation-operator-or-and-null-property-paths) and as explained there, there is still an [open issue about it](https://github.com/Microsoft/TypeScript/issues/16). Thanks for your clarification — lealceldeiro, Feb 27 '18 at 19:58

stukilgore · Accepted Answer · 2018-02-27T18:28:14.070

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.

edited Feb 27 '18 at 18:28

answered Feb 27 '18 at 18:21

stukilgore

101
3

score 1 · Answer 2 · answered Feb 27 '18 at 18:24

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

Cannot read property 'toLowerCase' of undefined Angular 5

2 Answers2