How to pass an array within a query string in Http

Question

This is my array of actors:

['Elvis', 'Jane', 'Frances']

How to pass this array within a query string in HttpClient?

I tried to use:

1)

let params = new HttpParams();
params = Params.append('actors[]', ['Elvis', 'Jane', 'Frances']);
this.http.get(url, { params: Params });

2)

let params = new HttpParams().set('actors[]', ['Elvis', 'Jane', 'Frances']);
this.http.get(url, { params: Params });

3)

let Params = new HttpParams();
Params = Params.append('actors[]', 'Jane');
Params = Params.append('actors[]', 'Elvis');
Params = Params.append('actors[]', 'Frances');
this.http.get(url, { params: Params }); 

1 and 2 doesn't work so as typescript gives:

[ts] Argument of type 'string[]' is not assignable to parameter of type 'string'.

3 sends only one item 'actors[]': 'Frances'

Answer 1

This worked for me.

let params = new HttpParams();

['Elvis', 'Jane', 'Frances'].forEach((actorName:string) =>{
  params = params.append(`actors[]`, actorName);
})

OR

let params = new HttpParams();
let actorsArray:Array<string> = ['Elvis', 'Jane', 'Frances'];

actorsArray.forEach((actorName:string) =>{
  params = params.append(`actors[]`, actorName);
})

Answer 2

const actors = ['Elvis', 'Jane', 'Frances'];
let params = new HttpParams();
for (const actor of actors) {
  params = params.append('actors', actor);
}

this.http.get(url, { params: params }); 

Answer 3

Here is a simple way to do it:

this.http.get(url, { 
    params: ['Elvis', 'Jane', 'Frances'].reduce((accumulator, name) => accumulator.append('names', name), new HttpParams())
});

Answer 4

I'm using URLSearchParams instead of HttpParams.

With URLSearchParams you need to stringify your array to set it to your Params "Key-Value-Store".

import { URLSearchParams } from '@angular/http';


let params: URLSearchParams = new URLSearchParams();
params.set('actors', JSON.stringify(yourArrayHere));

I think this should work on the same way with HttpParams because both using a Key-Value mapping in the set method so give it a try.

I hope this can help you.

UPDATE:

let options = new RequestOptions({search: params});

this._http.get(url, options).map(...)

with RequestOptions you can also edit Header and other request options.

Answer 5

Works on Angular 6.0.6:

private getParams(query) {
let params: HttpParams = new HttpParams();
for (const key of Object.keys(query)) {
  if (query[key]) {
    if (query[key] instanceof Array) {
      query[key].forEach((item) => {
        params = params.append(`${key.toString()}[]`, item);
      });
    } else {
      params = params.append(key.toString(), query[key]);
    }
  }
}
return params;

}

Result:

/api/message?page=1&per=2&order_by=name&order_direction=asc&base_object%5B%5D=2&base_object%5B%5D=1

Answer 6

I think the best way is to add them to parameters as a string and have your back-end convert it back to an array or list.

let actorList = ['Elvis', 'Jane', 'Frances']
let params = new HttpParams();
params = params.append('actors', actorList.join(', '));
this.http.get(url, { params: params });