Angular 4 rxjs: Filter data in observable array

Question

I have an Observable of an array:

schools: Observable<SchoolVM[]>;

And I need to filter this observable into another for an Autocomplete select

filteredSchools: Observable<SchoolVM[]>;

I subscribe to the form.valueChanges

this.formChange = this.searchForm.valueChanges
  .debounceTime(300)
  .subscribe( value => {
    this.filteredSchools = this.schools.filter(s => s.SchoolName == value);
  });

I have an error: Property 'SchoolName' does not exist on type 'SchoolVM[]' How can I solve it? And also: I have to filter by 2 different criteria. It is correct to filter like

this.filteredSchools = this.schools.filter(s => s.SchoolName == value || 
    s => s.SchoolName == value);

I rewrote the function following Aakash Jain's answer, like that:

this.formChange = this.searchForm.valueChanges
      .debounceTime(300)
      .subscribe( value => {
        this.filteredSchools = this.schools.map(schools => {
          return schools.filter((school: SchoolVM) => (school.SchoolName === value) || (school.City === value));
          // this.logger.info(this.filteredSchools);
        });
      });

and now I get the error "schools.filter" is not a function.

The observable

schools: Observable<SchoolVM[]>;

is filled from an httpClient call:

this.schoolService.filterSchools(arg)
      .subscribe(d => {this.schoolsToFilter = d; })

And in the service:

filterSchools(arg: string): Observable<any> {
    return Observable.from(this.http.get('/api/school/find/' + arg));

Maybe their is a problem with Observable, but the schools observable is well filled:

{ "SchoolID": 13028, "SchoolName": "100% Conduite", "City": "MEUDON", "ZipCode": "92190", "Street": "17 rue des Gallons", "Phone": "01 49 66 06 02" }, { "SchoolID": 6803, "SchoolName": "100% PERMIS", "City": "BADONVILLER", "ZipCode": "54540", "Street": "25 rue du Maréchal Foch", "Phone": "" },...

Aakash Jain · Accepted Answer · 2017-09-26 10:35:34Z

2

schools and filteredSchools are Observables that each contain an array of SchoolVM objects.

So when you do this:

this.schools.subscribe(s => console.log(s));

You will find that an array of SchoolVM gets printed. So the value of s above is not a single SchoolVM but instead an SchoolVM[].

As such, when you write:

this.filteredSchools = this.schools.filter(s => s.SchoolName == value);
// this will not work since s is an array

Instead, what you want to do is:

this.filteredSchools = this.schools.map(schools => {
    return schools.filter((school: SchoolVM) => school.SchoolName === value);
});

To filter by two conditions, your way is incorrect. What you are doing is defining two anonymous functions. This will give you a syntax error. Instead you want one anonymous function with the OR condition.

this.filteredSchools = this.schools.map(schools => {
    return schools.filter((school: SchoolVM) => (school.SchoolName === value) || (school.NumberOfStudents >= 100));
});

edited Sep 26, 2017 at 10:35

answered Sep 26, 2017 at 10:29

Aakash Jain

1,98318 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Marcos Over a year ago

I rewrote the autoselect code like that: this.formChange = this.searchForm.valueChanges .debounceTime(300) .subscribe( value => { this.filteredSchools = this.schools.map(schools => { return schools.filter((school: SchoolVM) => (school.SchoolName === value) || (school.City === value)); // this.logger.info(this.filteredSchools); }); }); and now I get the error "schools.filter is not a function". Any help please?

Aakash Jain Over a year ago

@Marcos try

this.formChange = this.searchForm.valueChanges.debounceTime(300).subscribe(val‌ue => this.schools.subscribe(schools => console.log(schools)))

and let me know what it logs.

Marcos Over a year ago

Thanks a lot for your help Aakash. With your function I have the error ERROR TypeError: _this.schools.subscribe is not a function. Maybe because schools is Observable<SchoolVM[]>?

Aakash Jain Over a year ago

I'm sorry, I forgot to add braces. Try this instead:

this.formChange = this.searchForm.valueChanges.debounceTime(300).subscribe(val‌ue => { this.schools.subscribe(schools => console.log(schools)); })

. Since it is an Observable, subscribe should definitely work. What we need to determine is whether the value emitted by the observable is a SchoolVM[] or null.

Marcos Over a year ago

I have the error TypeError: _this.schools.subscribe is not a function

|

Collectives™ on Stack Overflow

Angular 4 rxjs: Filter data in observable array

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related