Angular RXJS 6: filter observable array for items matching object key

Question

I have a service that returns an array of objects as an observable, a list of countries with objects with the country name and three-letter code, countries$ = this.mockData.get('countries.json');

If I have a 3-letter code for a country, I want to be able to filter the observable and return the matching name. For example if I have "GBR" I want to return "United Kingdom of Great Britain and Northern Ireland"

I have tried this,

  getfullCountryName() {
    const name = this.countries$.pipe(filter((c) => c.alpha3 === 'GBR'));
    console.log('name =', name);
    
    return name;
  }

but I must be forgetting something, since all I get in console is name = Observable {_isScalar: false, source: Observable, operator: FilterOperator}

What am I leaving off?

countries$ is a type of Country

export interface Country {
  numeric: string;
  alpha2: string;
  alpha3: string;
  name: string;
}

where should I put the type < > in that expression to get typings. e.g. that c has an attribute alpha3

Answer 1

Filter returns an observable in your case which gets assigned to name;

getfullCountryName() {
    const name = this.countries$.pipe(filter((c) => c.alpha3 === 'GBR'));
      
    return name;  // returns observable
}

somewhere

this.getfullCountryName().subscribe(result=>console.log(result));  // will print the right result.

---

better version,

 getfullCountryName() {
    return this.countries$.pipe(filter((c) => c.alpha3 === 'GBR'));
}