title: angular 7 observable array filtering error
body: <p>I am a newbie to Angular. Currently using Angular 7 version. I am trying to do filter operation using filter() method from Observable.
  I have created a service to inject Httpclient to load the data form a json file.
  Data is getting loaded from json. Now I am trying to filter the data based on EventEmitter.</p>
  
  <p>I am getting filter is not a function error</p>
  
  <p><strong>country-load.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { map, filter, switchMap } from 'rxjs/operators';
  import { Observable } from 'rxjs'
  import 'rxjs';
  import { ArrayType } from '@angular/compiler/src/output/output_ast';
  import { of } from 'rxjs/internal/observable/of';
  
  /* interface ServerData {
    shows: Show[];
  } */
  
  
  @Injectable({
    providedIn: 'root'
  })
  export class CountryLoadService {
  
    constructor(private http : HttpClient ) {}
  
  
    // HTTP get operation to fetch the port data from static JSON
  fetchCountry(){
    return this.http.get("assets/data/port_data.json").pipe(map((res) =&gt; of(res)));
  }
  }
  </code></pre>
  
  <p><strong>header.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';
  import { CountryLoadService } from './../country-load.service';
  import { HttpClient } from '@angular/common/http';
  import { ArrayType } from '@angular/compiler/src/output/output_ast';
  import { Observable } from 'rxjs/internal/Observable';
  import { toArray } from 'rxjs/internal/operators/toArray';
  
  @Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css']
  })
  export class HeaderComponent implements OnInit {
  
    //@Input() result:string="";
    @Output() changed = new EventEmitter&lt;string&gt;();
  
    constructor(private countryLoadService : CountryLoadService) {}
  
    countryData;
  
    ngOnInit() {
    this.countryLoadService.fetchCountry().subscribe(data =&gt; {
      console.log(data);
      console.log(this.countryData);
      this.countryData = data;
      console.log(this.countryData);
    })
  
    }
  
    onChange(countryName:string){
      this.changed.emit(countryName);
    }
  }
  </code></pre>
  
  <p><strong>header.component.html</strong></p>
  
  <pre><code>&lt;table width="100%" border="0" cellpadding="0" cellspacing="0"
        height="8"&gt;
        &lt;tr&gt;
          &lt;td width="70%" align="left" valign="middle" class="toplinks"&gt;
            &lt;app-menutab&gt;&lt;/app-menutab&gt;
          &lt;/td&gt;
  
          &lt;td width="5%" align="right" valign="middle" class="toplinks"&gt;
            &lt;label class="toplinks"&gt;Load Country&lt;/label&gt;
          &lt;/td&gt;
          &lt;td width="10%" align="right" valign="middle" class="toplinks"&gt;
            &lt;select #input1 style="width: 135px; font-family: Arial narrow; font-size: 8pt"
            name="countryCode" (change)="onChange(input1.value)"&gt;
            &lt;option *ngFor="let cn of (countryData | async)"&gt;{{cn.country_name}}&lt;/option&gt;
            &lt;!-- &lt;input [(ngModel)]="countryData[index]" placeholder="item"&gt; --&gt;
          &lt;/select&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p><strong>create-tariff.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { CountryLoadService } from './../country-load.service';
  import { Observable, Subject, asapScheduler, pipe, of, from,
    interval, merge, fromEvent } from 'rxjs';
  import { ArrayType } from '@angular/compiler/src/output/output_ast';
  import { map, startWith, filter } from 'rxjs/operators';
  import 'rxjs';
  import { Country } from './Country'
  import { concat } from 'rxjs/internal/observable/concat';
  
  @Component({
    selector: 'app-create-tariff',
    templateUrl: './create-tariff.component.html',
    styleUrls: ['./create-tariff.component.css']
  })
  
  
  export class CreateTariffComponent implements OnInit {
  
    //jsonData : Observable&lt;any&gt;[] = [];
    //jsonData : Country[] = [];
    jsonData;
  
    constructor(private currencyLoadService : CountryLoadService) {}
  
    ngOnInit() {
      this.currencyLoadService.fetchCountry().subscribe(data =&gt; {
        console.log(typeof(data));
        this.jsonData = data;
        //this.jsonData = Object.entries(data).map(([type, value]) =&gt; ({type, value}));
        console.log(this.jsonData);
      })
  
      }
    onChanged(value:string){
      if(value!='')
      {
        console.log('foo1111');
        console.log(this.jsonData);
        this.jsonData = this.jsonData.filter(res =&gt;res.country_name.startsWith(value));
        //this.jsonData = this.jsonData.map(resp =&gt; resp.filter(res =&gt; res.country_name.startsWith(value)));
        //const source = from(this.jsonData);
        //const ex = source.pipe(filter(res =&gt; res.country_name.starstWith(value)));
        }
        else{
          this.currencyLoadService.fetchCountry().subscribe(
              (data =&gt; {
                this.jsonData = data;})
            );
        }
    }
  
  }
  </code></pre>
  
  <p><strong>create-tariff.component.html</strong></p>
  
  <pre><code>&lt;app-header (changed)="onChanged($event)"&gt;&lt;/app-header&gt;
          &lt;span *ngFor="let item of (jsonData | async)"&gt;{{item.currency}}&lt;/span&gt;
  </code></pre>
  
  <p><strong>port_data.json</strong></p>
  
  <pre><code>[
      {
          "country_name": "Germany",
          "load_port": [
              "DEBRV06",
              "DEBRVTM",
              "DEHAMCA",
              "DEHAMEK"
          ],
          "currency": "EUR"
      },
      {
          "country_name": "Denmark",
          "load_port": [
              "DKAARPT",
              "DKCPHTM"
          ],
          "currency": "DKK"
      },
      {
          "country_name": "China",
          "load_port": [
              "CNIWNCT",
              "CNIWNMC",
              "CNNANCT",
              "CNNPOYD"
          ],
          "currency": "CNY"
      }
  ]
  </code></pre>
  
  <p>When try to do a filtering based on the value received from EventEmitter I am getting the below error.</p>
  
  <p>I have tried different option gathered from internet but no luck till now.</p>
  
  <p>Any help will be greatly appreciated.</p>
  
  <pre><code>ERROR TypeError: this.jsonData.filter is not a function
      at CreateTariffComponent.push../src/app/create-tariff/create-tariff.component.ts.CreateTariffComponent.onChanged (create-tariff.component.ts:40)
      at Object.eval [as handleEvent] (CreateTariffComponent.html:3)
      at handleEvent (core.js:19628)
      at callWithDebugContext (core.js:20722)
      at Object.debugHandleEvent [as handleEvent] (core.js:20425)
      at dispatchEvent (core.js:17077)
      at core.js:18567
      at SafeSubscriber.schedulerFn [as _next] (core.js:10250)
      at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196)
      at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134)
  </code></pre>
  
  <p><strong>Edit 1</strong>
  Please see the console log what I am getting for this json data</p>
  
  <pre><code>Observable {_isScalar: true, _subscribe: ƒ, value: Array(3)}
  value: Array(3)
  0: {country_name: "Germany", load_port: Array(4), currency: "EUR"}
  1: {country_name: "Denmark", load_port: Array(2), currency: "DKK"}
  2: {country_name: "China", load_port: Array(4), currency: "CNY"}
  length: 3
  __proto__: Array(0)
  _isScalar: true
  _subscribe: ƒ (subscriber)
  __proto__: Object
  </code></pre>
  
  <p><strong>Edit 2</strong> 
  This is what I am getting in console when doing toPromise()</p>
  
  <pre><code>ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array(0)}
  __zone_symbol__state: true
  __zone_symbol__value: Array(3)
  0: {country_name: "Germany", load_port: Array(4), currency: "EUR"}
  1: {country_name: "Denmark", load_port: Array(2), currency: "DKK"}
  2: {country_name: "China", load_port: Array(4), currency: "CNY"}
  length: 3
  __proto__: Array(0)
  __proto__: Object
  </code></pre>