CODEWITHSUNDEEP
angular
SidC
SidC

Reputation: 3213

Angular 6 How to store part of API Response for use in new HttpGet statement?

I'm working with an API that requires that I pass certain Id fields to it, such as groupId, in order to return the required data. The groupId is associated with a given logged in user. I would like to store groupId in an HttpParam array for reference in other methods. Here's what I've tried thus far:

 getVotes(groupId: number): Observable<Vote[]> {
     let groupId = getGroupById();
     return this.authService
       .get('/votes/' + groupId.toString());

 }

In the above, I want to obtain the votes for a given group based on the user's groupId. To get the user's groupId I've tried this:

getGroupbyId(){
   this.http.get(`${environment.apiUrl}/groups`);
}

Portions of component.ts are as follows:

ngOnInit() {
this.myProfile = this.route.snapshot.data.profile;
this.getGroups();
this.getVotes();
this.getVoteInsights();
this.getProfileInsights();
this.getGroupInvites();
}
private getGroups(): void{
  this.groupService.getGroups()
  .subscribe(
    groups => this.groups = groups
  );
}

private getVotes(): void {
  this.voteService.getVotes(this.groupId)
   .subscribe(
     votes => this.votes = votes
    );
 }

The output of the API Call getGroups is as follows:

{
    "id": 1,
    "name": "Sid's Test Group",
    "imageUrl": "",
    "about": "Sid's Test Group",
    "membershipApprovalType": 0,
    "groupInviteType": 0,
    "groupType": 0
},
{
    "id": 2,
    "name": "Sid's Test Group",
    "imageUrl": "",
    "about": "Testing Create Group",
    "membershipApprovalType": 0,
    "groupInviteType": 0,
    "groupType": 0
},
{
    "id": 3,
    "name": "Sid's Test Group",
    "imageUrl": "",
    "about": "Testing Create Group",
    "membershipApprovalType": 0,
    "groupInviteType": 0,
    "groupType": 0
},
{
    "id": 4,
    "name": "Sid's Test Group",
    "imageUrl": "",
    "about": "Testing Create Group",
    "membershipApprovalType": 0,
    "groupInviteType": 0,
    "groupType": 0
},
{
    "id": 5,
    "name": "Sid's Test Group",
    "imageUrl": "",
    "about": "A Test Group created by Sid",
    "membershipApprovalType": 0,
    "groupInviteType": 0,
    "groupType": 0
},
{
    "id": 6,
    "name": "Another Test Group",
    "imageUrl": "",
    "about": "Testing 123",
    "membershipApprovalType": 0,
    "groupInviteType": 0,
    "groupType": 0
}

I would like some guidance on how best to store all the groupIds from my getGroupbyId call, passing the selected groupId from the UI and use it in the getVotes call.

Upvotes: 0

Views: 46

Answers (2)

Jan B.
Jan B.

Reputation: 6468

When your groupId belongs to a user that is logged in, you should have something like a PrincipalService which contains information about the logged-in user, his permissions and very likely his groupId, too. Such a service is typically shared across the whole application. You can inject it into your components and receive the user object/its groupId wherever you like.

Upvotes: 1

inorganik
inorganik

Reputation: 25535

This is where rxjs operators really shine.

In your service, you create a groupId$ property:

groupId$: Observable<number>;

Then in your constructor set the value to the http.get():

constructor(private http: HttpClient) {
  this.groupId$ = this.http.get(`${environment.apiUrl}/groups`);
}

Then anytime you need to use it:

getVotes(): Observable<Vote[]> {
  return this.groupId$.pipe(
    exhaustMap(groupId => this.authService
      .get('/votes/' + groupId.toString());
    )
  );
}

ExhaustMap maps the groupId$ observable to the authService.get() observable. It will always use the last emitted value of groupId$ so it's cached in a way.

Upvotes: 1

Related Questions