Query Params array url encoded

1

Can I prevent the values for query params to be url encoded?

I have the following code:

# controller
queryParams: ['listOptions']
listOptions: []

@get('listOptions').pushObject(4)

This results in the following query params: ?listOptions=%5B4%5D. In the documentation and examples I find about query params as an array, the param values are not url encoded.

Is there a way to prevent the encoding or is it for the best (cross browser issues)?

2

Did you solve this yet? I got the same issue with a simple filter action like this one:

export default Ember.Component.extend({
  routing: Ember.inject.service('-routing'),

  selectedCategory: Ember.A(),

  actions: {
    filterCategory(newSelection, value, operation) {
      // expect =1,2,3..
      let selected = newSelection.join(',');

      // but turns into /parenting?category_id=4%2C3
      this.get('routing').transitionTo('parenting', [], { category_id: selected });
    }
  }
});

Anyone?

3

From what I can tell, arrays get encoded with JSON.stringify. I think you’ll want to override two (private) methods, Route.serializeQueryParam and Route.deserializeQueryParam. Don’t forget to call this._super(...arguments) for the default behaviour

For the OP use case it would be something like:

serializeQueryParam(value, urlKey, defaultValueType) {
  if (urlKey === 'listOptions') {
    return value.join(',');
  }

  return this._super(...arguments);
},

deserializeQueryParam(value, urlKey, defaultValueType) {
  if (urlKey === 'listOptions') {
    return value.split(',');
  }

  return this._super(...arguments);
},

For those that want to stay away from overriding private methods, you could have your own serialise/deserialise helpers. A get/set computed property would wrap the query param property with the actual property

1 Like