How to include parameter in HTTP request with Angular 6

Question

I need to call the following endpoint https://sample_url?id=12345 from an Angular service.

UserService

getUsersByGroupID(id): Observable<User[]> {
 var url = 'https://sample_url';

 var params = new HttpParams();
 params = params.append('id', id);

 this.data = this.http.get<User[]>(url, {params: params}, this.httpConfig.getHeaderOptions()).pipe(catchError(this.handleError('getData', [])));
 return this.data;
}

In one of my components I should do something like...

  this.userService.getUsersByGroupID(sys_id).toPromise().then(users => {
   this.users = users as User[]
}

but i'm not sure how to include the query parameter ?id=correctly. I tried looking at How to pass url arguments (query string) to a HTTP request on Angular but didn't help much.

Thanks.

btw, this.httpConfig.getHeaderOptions() is the header for the request, which is correct since I'm using it in another http request that does not require any parameter in the url — chris
– chris, Commented Aug 7, 2018 at 16:56
Why oh why don't you simply read the documentation? angular.io/guide/http#url-parameters, angular.io/api/common/http/HttpClient#get. get() expects 2 arguments, not 3. — JB Nizet
– JB Nizet, Commented Aug 7, 2018 at 17:01

K. Ayoub · Accepted Answer · 2018-08-07 16:58:43Z

1

getUsersByGroupID(id: number): Observable<User[]> {
    return this.http.get<User[]>("https://sample_url?id=" + id)
        .pipe(
             map(response => {
                 return response;
    }));
}

answered Aug 7, 2018 at 16:58

K. Ayoub

4461 gold badge6 silver badges16 bronze badges

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

2 Comments

Amit Chigadani Over a year ago

You may add some description to your answer to explain what changes have you made.

TheScripterX Over a year ago

Can you describe this solution ? and if it's really working, can you please give us the Output ? Thank you! It can help a lot of junior developers :)

Collectives™ on Stack Overflow

How to include parameter in HTTP request with Angular 6

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related