angular - RxJs: Filter array with inner observable

Question

I have an array of routes, which I'm trying to filter on depending if the service says the user has permission. I've tried various combination & transformative operators with no success mergeMap, concatMap, concatAll, mergeAll. The problem is that hasRoutePermission returns an observable that returns a boolean from the endpoint. Thanks in advance.

stackblitz

const exampleRoutes = [{
  model: 'ExampleModel'
}, {
  model: 'ExampleModel'
}, {
  model: 'ExampleModel'
}, {
  model: 'ExampleModel'
}];

filterRoutes(routes): Observable <[]> {
  const hasRoutePermission = (route: IRouteData): Observable <boolean> =>
    this.examplePermissionService.hasRoutePermission(route);

  return of(items)
  .pipe(
    filter(item => hasRoutePermission(item))// Problem is here
  )
}

I'm using an async pipe to subscribe to the filtered list in the template.

Answer 1

So you receive boolean value inside Observable and now need to use one of "flattening" operators (like mergeMap, concatMap, etc) to get back primitive value:

const { of, from } = rxjs; // = require("rxjs")
const { mergeMap, filter, map, toArray } = rxjs.operators; // = require("rxjs/operators")

function hasRoutePermission(id) {
  return of(id % 2 === 0); // mock api logic
}

function filterRoutes(items) {
  return from(items).pipe(
    mergeMap(item =>
      hasRoutePermission(item).pipe(
        filter(permission => permission),
        map(() => item)
      )
    ),
    toArray()
  );
}

const filtered$ = filterRoutes([0,1,2,3,4,5]);
filtered$.subscribe(v => console.log(v));

<script src="https://unpkg.com/rxjs@6.6.2/bundles/rxjs.umd.min.js"></script>