Angular RxJs: Request for each item in array

Question

One of my components gets an array of items. Each item has a permission, which will be checked by a rest call based on the user role. If the user is permitted for the item, it can be displayed.

So I came along with this approach:

ngOnInit(): void {
  for( let tile of this.tiles ) {
    this.permissionCheckService.isUserPermitted( tile.name ).subscribe( 
      isPermitted => tile.show = isPermitted
    )
  }
}

But this solution introduces a new variable "show". Maybe it would be even better if the items, which should not be displayed, will be removed from the array?

Next step should be to implement a loading indicator. This indicator should be removed, if all requests are finished. But my problems starts here. I think I have to combine all observables, but i don't know how to do it.

Here is a working example: https://stackblitz.com/edit/angular-wfjj5n-horatl?embed=1&file=src/app/alert-basic.ts

mbojko · Accepted Answer · 2020-07-10 10:14:00Z

1

Hiding/showing the loading indicator can be done with one simple boolean flag that's set to true/false on the beginning/completion of the stream. For that, of course, you need to have one stream, so forkJoin or combineLatest are your friends. Also, you can put the result array in a separate stream, to keep with the reactive/immutable paradigm. Something like

  constructor(private permissionCheckService: PermissionCheckService) {}

  ngOnInit(): void {
    this.isLoading = true;

    this.shownTiles$ = this.checkPermissions().pipe(
      map(this.filterTiles),
      tap(() => (this.isLoading = false))
    );
  }

  checkPermissions = (): Observable<boolean[]> =>
    forkJoin(
      this.tiles.map(tile =>
        this.permissionCheckService.isUserPermitted(tile.name)
      )
    );

  filterTiles = (booleanFlagsArr: boolean[]): any[] =>
    this.tiles.filter((tile, index) => booleanFlagsArr[index] === true);

Here's a stackblitz:

https://stackblitz.com/edit/angular-wfjj5n-f7aht4?file=src%2Fapp%2Falert-basic.ts

answered Jul 10, 2020 at 10:14

mbojko

14.8k2 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2622344 Over a year ago

thank you very much, great answer! But I have forgotton one detail. Not every item must have a permission. For items which don't have any permission, the service shouldn't be called. I've forked your stackblitz: stackblitz.com/edit/angular-wfjj5n-jkhre6?embed=1&file=src/… . Also I've added the new param "permission" to a tile. Maybe you can help me again?

Eliseo · Accepted Answer · 2020-07-10 09:57:06Z

1

Yopu can use forkJoin to subscribe to an array of calls. Then filter by response

forkJoin(
  this.tiles.map(x => this.permissionCheckService.isUserPermitted(x.name))
).subscribe((res: any[]) => {
  //if you want store in an auxiliar variable
  this.tilesValid = this.tiles.filter((x, index) => res[index]);
  //or
  //this.tiles = this.tiles.filter((x, index) => res[index]);
});

answered Jul 10, 2020 at 9:57

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Collectives™ on Stack Overflow

Angular RxJs: Request for each item in array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related