Yitzhak
Yitzhak

Reputation: 363

Remove query parameter

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

Answers (2)

Yitzhak
Yitzhak

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

Tudor Constantin
Tudor Constantin

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

Related Questions