hx-vals with an array and the resulting url string

[marcus-at-localhost]

Hi, I'm stuck for hours with the following problem:

I'm using hx-vals to add an array parameter to htmx.get request. Something like:

<button hx-get="/example" hx-vals='{"x": ["a","b"]}'></button>

which results in /example?x=a&x=b
but I need: /example?x[]=a&x[]=b to capture that with php $_GET['x'][1] for example.

The final path is being build here:

htmx/dist/htmx.js

Line 4419 in 407408b

finalPath += urlEncode(filteredFormData)

and I have no way to access the URL string through an event like htmx:beforeRequest or something. At least, I found no viable way to manipulate the URL.

my plan would be to use a library like https://github.com/ljharb/qs/ to rebuild the url as I need it.

Any idea how to solve this?
Thanks for your time.

This is somewhat related: #966

[marcus-at-localhost]

ok, I think I got it.

I check if an element with the ['data-attribute-id'] attribute (a button in my case) initiated the request.
then I clean up the parameters. My hx-vals are in there along with all other get parameter that already exist in the url.
I build the query string with https://github.com/ljharb/qs/ because it can stringify arrays with the bracket notation.
And then I remove the evt.detail.parameters because else they get added to the path again and results in something like: /example?x[]=a&x[]=b&x=a&x=b

let handle = function (evt) {

	if (evt.detail.elt.hasAttribute('data-attribute-id')) {

		const path = evt.detail.path.split("?")[0];
		// Remove empty elements from parameters
		for (const key in evt.detail.parameters) {
			if (!evt.detail.parameters[key] || (Array.isArray(evt.detail.parameters[key]) && !evt.detail.parameters[key].length)) {
				delete evt.detail.parameters[key];
			}
		}
		// Update the path with new parameters
		const searchParams = Qs.stringify(evt.detail.parameters, { arrayFormat: 'brackets' });
		evt.detail.path = `${path}?${searchParams}`;
		delete evt.detail.parameters
	}
};

document.body.addEventListener("htmx:configRequest", handle);

I might run into some other trouble, but apparently evt.detail.path is the place to manipulate the url.