I currently have an angular pipe which filters results based on the user's input. The only issue I am having is that some of the results do not have a value, therefore, I receive the following error:

Cannot read property 'toLocaleLowerCase' of null

My pipe looks like this.

transform(value: QueuedTemplateDto[], filterBy: string): QueuedTemplateDto[] {
    filterBy = filterBy ? filterBy.toLocaleLowerCase() : null;
    return filterBy 
        ? value.filter((check: QueuedTemplateDto) => check.user.toLocaleLowerCase().indexOf(filterBy) !== -1) 
        : value;
}

So I have tried to add an if statement which only allows the code to be executed is the check.user user attribute is not null however I receive an error every time I try to input this

My JavaScript knowledge is limited when it es to this. Any help would much be appreciated!

I currently have an angular pipe which filters results based on the user's input. The only issue I am having is that some of the results do not have a value, therefore, I receive the following error:

Cannot read property 'toLocaleLowerCase' of null

My pipe looks like this.

transform(value: QueuedTemplateDto[], filterBy: string): QueuedTemplateDto[] {
    filterBy = filterBy ? filterBy.toLocaleLowerCase() : null;
    return filterBy 
        ? value.filter((check: QueuedTemplateDto) => check.user.toLocaleLowerCase().indexOf(filterBy) !== -1) 
        : value;
}

So I have tried to add an if statement which only allows the code to be executed is the check.user user attribute is not null however I receive an error every time I try to input this

My JavaScript knowledge is limited when it es to this. Any help would much be appreciated!

• javascript
• angular
• typescript

• This ment is not directly related to your question. It is discouraged to use pipes for filtering. See: angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe . It would probably be best if you filter your data in your ponent. – tom van green Commented Aug 8, 2018 at 11:42

2 Answers 2

You just need to check user property is defined or not(null), so add check.user !== null before your filter statement(for ignoring all falsy values simply use check.user).

transform(value: QueuedTemplateDto[], filterBy: string): QueuedTemplateDto[] {
filterBy = filterBy ? filterBy.toLocaleLowerCase() : null;
return filterBy ? value.filter((check: QueuedTemplateDto) =>
  check.user !== null && check.user.toLocaleLowerCase().indexOf(filterBy) !== -1) : value;}
  //^^^^^^^^^^^^^^^^^^^^^ ----- here

FYI : You can change the condition as per your requirement.

Take advantage of the conditions in Javascript to reduce your code :

transform(value: QueuedTemplateDto[], filterBy: string): QueuedTemplateDto[] {
  return filterBy && 
    value.filter(item => item && 
      item.user && 
      item.user.toLocaleLowerCase().indexOf(filterBy) !== -1) 
    || value;
}

This is because of truthy/falsy values, also called the holy trinity of Javascript.

See how it behaves :

const empty = '';
const undef = undefined;
const nul = null;
const defined = 'This is defined';
const zero = 0;

const data = ['This is data'];

console.log(empty && data || 'it is empty');
console.log(undef && data || 'it is undefined');
console.log(nul && data || 'it is null');
console.log(nul && data || 'it is equal to zero');
console.log(defined && data || 'You will not see this message');