Reputation: 363
I have a complex multi-select filter page so I'm grouping filters like this http://localhost:3000/search?id[]=101404&id[]=7267261
. I'm using URLSearchParams()
to manage my URLs.
The only thing that is not working is removing a parameter once it has been unchecked. I tried using the URLSearchParams.delete()
, but it only accepts a single parameter, name. If I pass id[], it removes ALL id[]'s, not just the one I want to be deleted.
EDIT: based on recommendations, I have this new code (see old code below). Hoping someone has a far more elegant solution.
setQueryParams = (param = null, value = null, category = null) => {
....
// parameter exists but value is false
} else if (param && !value) {
// find all values for category and filter out unchecked value
const values = params.getAll(`${category}[]`).filter(category => category !== param)
// remove entire category from URLSearchParams
params.delete(`${category}[]`)
// loop over filtered list and append them BACK to URLSearchParams
values.forEach((value) => {
params.append(`${category}[]`, value)
});
}
this.setState({
query: params.toString()
});
}
The only other way I can think of is to write some Regexp, which I wasn't able to get it to work anyway. My params are encoded, so shouldn't something like this work? I can't even get this to work in console...
"id%5B%5D=101404&id%5B%5D=7267261".replace(/\%5\%D/,'')
"id%5B%5D=101404&id%5B%5D=7267261".replace(/%5%D/,'')
"id%5B%5D=101404&id%5B%5D=7267261".replace(/\[\]/,'')
None of these work. Here is my code generating the query parameters.
setQueryParams = (param = null, value = null, category = null) => {
const query = this.state.query;
// get current location
const location = this.props.location.search;
// Set params based on whether component mount or filter change
const params = param ? new URLSearchParams(query) : new URLSearchParams(location);
// value must be equal to true
if (param && value) {
params.append(`${category}[]`, param);
// parameter exists but value is false
} else if (param && !value) {
params.delete(category);
}
this.setState({
query: params.toString()
});
}
Upvotes: 3
Views: 2993
Reputation: 363
setQueryParams = (param = null, value = null, category = null) => {
....
// parameter exists but value is false
} else if (param && !value) {
// find all values for category and filter out unchecked value
const values = params.getAll(`${category}[]`).filter(category => category !== param)
// remove entire category from URLSearchParams
params.delete(`${category}[]`)
// loop over filtered list and append them BACK to URLSearchParams
values.forEach((value) => {
params.append(`${category}[]`, value)
});
}
this.setState({
query: params.toString()
});
}
Upvotes: 0
Reputation: 26861
What if you use the getAll('id[]')
, iterate over the results and append()
the ones you want.
Although it's not that elegant of a solution, I think it's still better than the regex approach.
Upvotes: 2