Passing array into URLSearchParams while consuming http call for get request

Going through the Angular documentation for URLSearchParams, I dint find any documentation on passing array as an parameter.

Can anybody help with that?

In fact, you can't pass an array directly but you can use several times the append method:

let params = new URLSearchParams();
params.append('arrayparams', 'val1');
params.append('arrayparams', 'val2');
params.append('arrayparams', 'val3');
console.log(params.toString());

URLSearchParams can be passed a sequence of pairs, so to have an array of values:

var ids = [1,2,3,4]
var search = new URLSearchParams(ids.map(s=>['id',s]))
var searchString = search.toString()
// "id=1&id=2&id=3&id=4"

// To get the ids from the URL search string
var search_ids = [...search.getAll('id')]

In fact this is the simplest functional way:

const url = new URL('http://localhost/')
url.searchParams.append('date[0]', date1)
url.searchParams.append('date[1]', date2)
console.log(url.toString())

For sure you can iterate through an array.

If you want to use @washington-braga's approach but don't want to install lodash:

function buildParams(data) {
    const params = new URLSearchParams()

    Object.entries(data).forEach(([key, value]) => {
        if (Array.isArray(value)) {
            value.forEach(value => params.append(key, value.toString())
        } else {
            params.append(key, value.toString())
        }
    });

    return params.toString()
}

I've used Lodash map to iterate over objects/arrays and append the params dynamically.

const buildParams = (data) => {
  const params = new URLSearchParams();

  map(data, (value, key) => {
    if (Array.isArray(data[key])) {
      map(value, item => params.append(key, item));
    } else {
      params.append(key, value);
    }
  });

  return params;
};

const params = {
  foo: ['a', 'b', 'c'],
  bar: 'xyz'
}

const doFetch = fetch(`http://api.com/search?${buildParams(params)}`)

So the final URL will look like: http://api.com/search?foo=a&foo=b&foo=c&bar=xyz

         makeSearchParams(link){
            var url = new URL(window.location.protocol + '//' + window.location.host + link);
            const params = this.getSearchParams();

            for(let key in params){
                if(Array.isArray(params[key])){
                    for(let key1 in params[key]){
                        url.searchParams.append(key +'[]', params[key][key1]);
                    }
                }
                else
                    url.searchParams.append(key, params[key]);
            }
            return url;
        }

const buildParams = (search) => {
  if (!search) return "";

  const params = new URLSearchParams();

  Object.entries(search).forEach(([key, value]) => {
    if (Array.isArray(value)) params.append(key, value.join(","));
    else params.append(key, value.toString());
  });

  return `?${params}`;
};

const search = {
  types: ['good', 'bad', 'normal'],
  id: 777
}

const url = `http://good.com/${buildParams(search)}`;

As a result, you will get http://good.com/?types=good,bad,normal&id=777

Here is a function that automatically appends array values as multiple entries/keys in the query string.

The difference to other solutions posted already is, that it is simpler to read and only considers arrays - without appending all other object keys again.

function convertToQueryUrl(obj: never): string {
	const params = new URLSearchParams(obj);
	for (const [key, value] of Object.entries(obj)) {
		if (Array.isArray(value)) {
			params.delete(key);
			value.forEach((v) => params.append(key, v));
		}
	}
	return params.toString();
}