Argthtjtr

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

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