angular 7 observable array filtering error

Question

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.

I am getting filter is not a function error

country-load.service.ts

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) => of(res)));
}
}

header.component.ts

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<string>();

  constructor(private countryLoadService : CountryLoadService) {}

  countryData;

  ngOnInit() {
  this.countryLoadService.fetchCountry().subscribe(data => {
    console.log(data);
    console.log(this.countryData);
    this.countryData = data;
    console.log(this.countryData);
  })

  }

  onChange(countryName:string){
    this.changed.emit(countryName);
  }
}

header.component.html

<table width="100%" border="0" cellpadding="0" cellspacing="0"
      height="8">
      <tr>
        <td width="70%" align="left" valign="middle" class="toplinks">
          <app-menutab></app-menutab>
        </td>

        <td width="5%" align="right" valign="middle" class="toplinks">
          <label class="toplinks">Load Country</label>
        </td>
        <td width="10%" align="right" valign="middle" class="toplinks">
          <select #input1 style="width: 135px; font-family: Arial narrow; font-size: 8pt"
          name="countryCode" (change)="onChange(input1.value)">
          <option *ngFor="let cn of (countryData | async)">{{cn.country_name}}</option>
          <!-- <input [(ngModel)]="countryData[index]" placeholder="item"> -->
        </select>
        </td>
      </tr>
    </table>

create-tariff.component.ts

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<any>[] = [];
  //jsonData : Country[] = [];
  jsonData;

  constructor(private currencyLoadService : CountryLoadService) {}

  ngOnInit() {
    this.currencyLoadService.fetchCountry().subscribe(data => {
      console.log(typeof(data));
      this.jsonData = data;
      //this.jsonData = Object.entries(data).map(([type, value]) => ({type, value}));
      console.log(this.jsonData);
    })

    }
  onChanged(value:string){
    if(value!='')
    {
      console.log('foo1111');
      console.log(this.jsonData);
      this.jsonData = this.jsonData.filter(res =>res.country_name.startsWith(value));
      //this.jsonData = this.jsonData.map(resp => resp.filter(res => res.country_name.startsWith(value)));
      //const source = from(this.jsonData);
      //const ex = source.pipe(filter(res => res.country_name.starstWith(value)));
      }
      else{
        this.currencyLoadService.fetchCountry().subscribe(
            (data => {
              this.jsonData = data;})
          );
      }
  }

}

create-tariff.component.html

<app-header (changed)="onChanged($event)"></app-header>
        <span *ngFor="let item of (jsonData | async)">{{item.currency}}</span>

port_data.json

[
    {
        "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"
    }
]

When try to do a filtering based on the value received from EventEmitter I am getting the below error.

I have tried different option gathered from internet but no luck till now.

Any help will be greatly appreciated.

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)

Edit 1 Please see the console log what I am getting for this json data

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

Edit 2 This is what I am getting in console when doing toPromise()

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

Answer 1

 data = [ { "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" } ]; value = "Germany"; var jsonData = data.filter(res =>res.country_name.startsWith(value)); console.log(jsonData)

Looks pretty good to me. try to understand if the data u send is actully ARRAY of Objects and not a string or something else.

Ok like I thought, your get request is not correct.

fetchCountry(){
  return this.http.get("assets/data/port_data.json").toPromise().then(d=>d);
}

and when you recive on the header component:

this.countryData = this.countryLoadService.fetchCountry();

Answer 2

Most likely this is incorrect inside onChanged . It gets compiled well somehow but in runtime it might be not what you expect, probably something like MapSubscriber .