How to filter Observable of array with rxjs 6 with async

Question

I have an Observable which return as observable of data and that is binding with async using HTML.

here I have called the service.

this.ProductOptions = this.ProductService.fetchProduct();

In HTML we have binding as

Productoptions | async.

It's working fine.

In another function call, I have filtered based on product name, but it's not working.

getCategory() {
  const productListOptions = this.productOptions.pipe(
    switchMap((itemList: BindingModel[]) => itemList.filter(product => product.name !== "Active")));

  console.log(this.productListOptions);
}

this.productOptions shows below in console.

---

But when I subscribe to the observable.

this.productService.fetchproducts().subscribe(response => console.log(response));

I am getting below format

[{id:1,name:"Active"},{id:1,name:"InActive"}]; i need to filter based on Active

Answer 1

Your using switchMap where you should use the map operator.

The differences:

switchMap

Convert an Observable that emits Observables into a single Observable that emits the items emitted by the most-recently-emitted of those Observables

In other words, the function defined inside the switchMap must return an observable. Your example returns an array of items, not an observable

map

Transform the items emitted by an Observable by applying a function to each item.