title: Angular 4 rxjs: Filter data in observable array
body: <p>I have an Observable of an array:</p>
  
  <pre><code>schools: Observable&lt;SchoolVM[]&gt;;
  </code></pre>
  
  <p>And I need to filter this observable into another for an Autocomplete select</p>
  
  <pre><code>filteredSchools: Observable&lt;SchoolVM[]&gt;;
  </code></pre>
  
  <p>I subscribe to the form.valueChanges</p>
  
  <pre><code>this.formChange = this.searchForm.valueChanges
    .debounceTime(300)
    .subscribe( value =&gt; {
      this.filteredSchools = this.schools.filter(s =&gt; s.SchoolName == value);
    });
  </code></pre>
  
  <p>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</p>
  
  <pre><code>this.filteredSchools = this.schools.filter(s =&gt; s.SchoolName == value || 
      s =&gt; s.SchoolName == value);
  </code></pre>
  
  <hr>
  
  <p>I rewrote the function following <a href="https://stackoverflow.com/a/46423987/3441882">Aakash Jain's answer</a>, like that:</p>
  
  <pre><code>this.formChange = this.searchForm.valueChanges
        .debounceTime(300)
        .subscribe( value =&gt; {
          this.filteredSchools = this.schools.map(schools =&gt; {
            return schools.filter((school: SchoolVM) =&gt; (school.SchoolName === value) || (school.City === value));
            // this.logger.info(this.filteredSchools);
          });
        });
  </code></pre>
  
  <p>and now I get the error "schools.filter" is not a function.</p>
  
  <p>The observable</p>
  
  <pre><code>schools: Observable&lt;SchoolVM[]&gt;;
  </code></pre>
  
  <p>is filled from an httpClient call:</p>
  
  <pre><code>this.schoolService.filterSchools(arg)
        .subscribe(d =&gt; {this.schoolsToFilter = d; })
  </code></pre>
  
  <p>And in the service:</p>
  
  <pre><code>filterSchools(arg: string): Observable&lt;any&gt; {
      return Observable.from(this.http.get('/api/school/find/' + arg));
  </code></pre>
  
  <p>Maybe their is a problem with Observable, but the schools observable is well filled: </p>
  
  <p>{
      "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": ""
    },...</p>