Angular using HttpClient and adding mulitple params to Get

Question

Using Angular6 here.

My API is called as:

    https://localhost:44300/list/pete/id/open

In my angular I am calling this API as:

  getData(name, id, status): Observable<any[]> {
    // Initialize Params Object
    let params = new HttpParams();

    // Begin assigning parameters
    params = params.append('name', name);
    params = params.append('id', id);
    params = params.append('status', status);

    return this.httpClient.get<any[]>(this.url + '/list', {  params: params });
 }

The issue is when my UI calls this getData method, the calls that goes to the API is as below (as seen in console):

https://localhost:44300/list?name=pete&id=981&status=open

This call is not same as per my actual API call. How can I make changes and correctly pass params.

--Updated Code--

 getData(name, id, status): Observable<any[]> {
    return this.httpClient.get<any[]>(${ this.url } / list / ${ name } / ${ id } / ${ status });
  }

I get these error:

Cannot find name $
Expected 1 or 2 arguments, but got 5
The left hand side of arithmetic operation must be of type any, number, bigint, enum type
',' expected

params is for query parameters. Not for path parameters. Just concatenate them to form the final path. — JB Nizet
– JB Nizet, Commented Mar 8, 2019 at 19:22
@JBNizet I understood now that params are for query. But I dont understand how shall I concatenate them. Could you please provide an example. Do I just construct my URL like return this.httpClient.get<any[]>(this.url + '/list' + name + '/' + id + '/' + status); — aman
– aman, Commented Mar 8, 2019 at 19:31
Yes. You can also use a template string, using backticks as delimiters: ${this.url}/list/${name}/${id}/${status}. — JB Nizet
– JB Nizet, Commented Mar 8, 2019 at 19:33
@JBNizet see my updated post the errors I get when I use your code as it is. Looks like I am missing something here? — aman
– aman, Commented Mar 8, 2019 at 19:45

kasptom · Accepted Answer · 2019-03-08 19:58:08Z

1

You forgot backticks (`)

getData(name, id, status): Observable<any[]> {
    return this.httpClient.get<any[]>(`${this.url}/list/${name}/${id}/${status}`);
}

see: Template literals (Template strings)

edited Mar 8, 2019 at 19:58

kasptom

2,4682 gold badges20 silver badges23 bronze badges

answered Mar 8, 2019 at 19:52

Reza

20.1k18 gold badges102 silver badges176 bronze badges

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

1 Comment

aman Over a year ago

sorry when I do the above I see in my console its making call to my api as: localhost:44301/$this.url/list/$%7B%20name%20%7D/…" which errors out because its incorrect

Collectives™ on Stack Overflow

Angular using HttpClient and adding mulitple params to Get

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related