Url encoding for query params in Ember.js

ember.js, javascript, url-encoding

Solution

I had a very similar problem, and made it work by overriding `serializeQueryParam` and `deserializeQueryParam` in the route.

In the controller you would have:

queryParams: ['files'],
files: []

And in the route:

  serializeQueryParam: function(value, urlKey, defaultValueType) {
    if (defaultValueType === 'array') {
      return value;

      // Original: return JSON.stringify(value);
    }
    return '' + value;
  }, 

and:

  deserializeQueryParam: function(value, urlKey, defaultValueType) {

    if (defaultValueType === 'array') {

      var arr = [];
      for (var i = 0; i < value.length; i++) {
        arr.push(parseInt(value[i], 10));
      }      

      return arr;

      // Original: return Ember.A(JSON.parse(value));
    }

    if (defaultValueType === 'boolean') {
      return (value === 'true') ? true : false;
    } else if (defaultValueType === 'number') {
      return (Number(value)).valueOf();
    }
    return value;
  }, 

The url will then become something like:

?files[]=1&files[]=2&files[]=3

Which will then be a real array on the server side.

Take a look at this working example on jsbin.com

Problem

Original source