Angular Http GET call pass array as params to API

Question

Hi I'm new to angular hence got stuck at one place. I need to pass array as parameters to backend API backend API expects array of string as parameters

 const params = new HttpParams();
 const depKey = ['deploymentInprogress', 'deploymentMessage'];
 params.append('depKey', JSON.stringify(depKey));

 this.http.get(uri, { params: params })
      .pipe(
        take(1),
        catchError((error) => {
          return throwError(error);
        })
      ).subscribe(data => {

   })

The above code didn't work Need an help on this I'm not sure how we can pass array of strings as params to our backend API

What means "didn't work"? What specifically didn't work? You are not passing an array, but a JSON-String that represents your array. It's hard to give any specific answer if we don't know how your backend expectes this data. — Lukas-T
– Lukas-T, Commented Dec 13, 2022 at 7:50
backend expects array of string. How can we pass the params as array of string? — Mitul Panchal
– Mitul Panchal, Commented Dec 13, 2022 at 7:51
Your API should be POST method to receive complex values such as objects/arrays. GET method for API only supports simple value via the query string, and query params. — Yong Shun
– Yong Shun, Commented Dec 13, 2022 at 7:53
@YongShun ok can you provide me the exact snippet using above params? — Mitul Panchal
– Mitul Panchal, Commented Dec 13, 2022 at 7:56
Signature of GET says we can pass array of stings get(url: string, options?: { headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: 'body'; params?: HttpParams | { [param: string]: string | string[]; }; — Mitul Panchal
– Mitul Panchal, Commented Dec 13, 2022 at 7:57

FedG · Accepted Answer · 2022-12-13 16:28:26Z

3

You can do this:

const params = new HttpParams();
 const depKey = ['deploymentInprogress', 'deploymentMessage'];
 params.append('depKey', depKey.join(', ');

 this.http.get(uri, { params: params }).....

edited Dec 13, 2022 at 16:28

answered Dec 13, 2022 at 8:06

FedG

1,3311 gold badge7 silver badges16 bronze badges

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

2 Comments

Lukas-T Over a year ago

The term "body" is misleading here. A GET requests isn't supposed to have a body and angular doesn't give you the option to pass one with .get().

FedG Over a year ago

Yes you are absolutely right, I copied and pasted without realizing it was a get.

Naren Murali · Accepted Answer · 2022-12-13 08:07:01Z

1

You can send the array values individually with the same parameter name, then api can read the individual values!

 const params = new HttpParams();
 const depKey = ['deploymentInprogress', 'deploymentMessage'];
 depKey.forEach((item: any) => {
     params.append('depKey', item);
 });

 this.http.get(uri, { params: params })
      .pipe(
        take(1),
        catchError((error) => {
          return throwError(error);
        })
      ).subscribe(data => {

   })

answered Dec 13, 2022 at 8:07

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Comments

Charlie V · Accepted Answer · 2022-12-13 08:31:07Z

0

You need to know what the specification of the backend API is. Without the specification it's just guessing how to get this to work.

Most of the times it will be encoded in the body and that can be done in may forms, for example:

{ 
   "key": "value",
   "items": [
      {"aaa":"bbb","ccc":"dddd"},
      {"aaa":"fff","ccc":"hhhh"}
   ]
}

but note: this is just one way of doing it!

If you can share your specifications, we can help you.

Maybe you have a postman example on how to call the endpoint?

answered Dec 13, 2022 at 8:31

Charlie V

1,0501 gold badge10 silver badges15 bronze badges

Collectives™ on Stack Overflow

Angular Http GET call pass array as params to API

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related