Receive Data Stream At Once With Service Call

I've a backend controller with C# that takes two parameters to return data for user permission. This works for one user at a time, now I've a scenario to use the same controller to return data of multiple users at a time. Note: I've to use the same controller and no changes can be done in the backend at present. The controller returns a list with required permission for a user currently.

Without much thought and delay, I did the following that seems working but not getting the result set at one go. Here's the code snippet I've now:

//This works selecting a drop down box value
filterUsers() {
this.filteredUsers.items = [...this.dataSrc.items.filter(x => this.filterUsersFunc(x, this.filterState))]; //Initial values are here when drop down box selection done
this.filteredUsers.total = this.filteredUsers.items.length;

console.log("Filtered Users below:");
console.log(this.filteredUsers.items);

//Depending upon initial values and iterating them, like to have user permission for multiple users
for (var i = 0; i < this.filteredUsers.items.length; i++) {
this.userId = 0;
console.log(this.filteredUsers.items.id);
this.userId = this.filteredUsers.items.id;

this.userService
.getExploreUserPermissionSettings(this.filteredUsers.items?.id, this.filteredUsers.items?.enterpriseId) //Passing parameters from the loop
.pipe(finalize(() => this.busy = false))
.subscribe((response) => {

console.log("User Ids:");
console.log(this.filteredUsers.items?.id);

let obj = {} as ExploreUserPermissionSettingItemArr; //Then trying to save them in an object
obj.userId = this.userId; //Even the user id doesn't get changed in each iteration, it only takes the last user id each time
obj.newArr = response.data.included;

console.log("In For Loop:");
console.log(obj);

this.userPermissionsIncluded.push(obj); //Finally adding them to an array
});
}

console.log("User Permissions Below:");
console.log(this.userPermissionsIncluded); //Lastly trying to see the result set
}


Interesting thing is, the last statement console.log(this.userPermissionsIncluded); comes to top in the console log of the browser and later getting the values in a stream as follows shown in the screenshot:



I know, am doing something wrong here. But is there a way to get the stream at one go and save them in an array at once? Say I've 20 users on filtering and this 20 users data should be in the array rather iterating one by one that I've now, shown in the screenshot.

One more thing, I get the user ids from the for loop and it passes the id to the controller correctly. But when I save it to the object obj.userId = this.userId;, it only sets the last user id from the loop as you can see in the screenshot.

Continue reading...