Cannot read property 'filter' of null in angular 2?

6
votes

I am getting this error Cannot read property 'filter' of null

when I apply filter in angular 2 .here is my code

http://plnkr.co/edit/K46jJsnmHiONuqIsnuzW?p=preview

import {Pipe} from 'angular2/core';

@Pipe({
  name: 'sortByName',
  pure: false,
})
export class SortByNamePipe {

  transform (value, [queryString]) {
    // console.log(value, queryString);
    return value.filter((student)=>new RegExp(queryString).test(student.name))
    // return value;
  }
}
1
angularangular2-routingangular2-template

1 Answers

14
votes

It's because you have data as input that are loaded asynchronously using an HTTP request.

You need to check this before being able to apply the filter:

export class SortByNamePipe {
  transform (value, [queryString]) {
    if (value==null) {
      return null;
    }

    return value.filter((student)=>new RegExp(queryString).test(student.name))
    // return value;
  }
}