How to properly send URL parameters containing commas using AngularJS?
<p>I have a feeling I am just looking at this wrong, but I want to get feedback on the proper way to pass URL query parameters through Angular's $http.get() method - specifically, parameters that contain commas.</p>

<p>Let's say I have the following data, to be used as URL parameters in a GET request:</p>

<pre><code>var params = {
  filter : [
     "My filter",
     "My other filter",
     "A filter, that contains, some commas"
  ],
  sort : [
     "ascending"
  ]
};
</code></pre>

<p>Now, I convert this structure to some parameters that can be fed into <code>$http.get</code>:</p>

<pre><code>var urlParams = {};
angular.forEach(params, function(value, name) {
    urlParams[name] = "";
    for (var i = 0; i &lt; value.length; i++) {
       urlParams[name] += value[i];
       if (i &lt; value.length - 1) {
         urlParams[name] += ","
       }
    }
}
</code></pre>

<p>At this point, <code>urlParams</code> looks like this:</p>

<pre><code>{
  filter : "My filter,My other filter,A filter, that contains, some commas",
  sort : "ascending"
}
</code></pre>

<p>Now, that isn't what I want, since the third <code>filter</code> parameter has now turned into three separate parameters. (The API I am working with does not allow multiple values for a parameter to be passed in any other way than: "?param=value1,value2,value3") So, what I need to do is URI encode these values first, right? So, I add a <code>encodeURIComponent()</code> to the above routine like this:</p>

<pre><code>urlParams[name] += encodeURIComponent(value[i]);
</code></pre>

<p>This gives me a parameters object that looks like this:</p>

<pre><code>{
  filter : "My%20filter,My%20other%20filter,A%20filter%2C%20that%20contains%2C%20some%20commas",
  sort : "ascending"
}
</code></pre>

<p>Now, I make a request:</p>

<pre><code>var config = {
  params : urlParams
};
$http.get("/foo", config).then(function(response){
  console.log(response);
});
</code></pre>

<p>... and this doesn't work, since Angular encodes the URL parameters as well, so the request ends up looking like this:</p>

<pre><code>GET "/foo?filter=My%2520filter,My%2520other%2520filter,A%2520filter%2C%20that%20contains%2C%20some%20commas&amp;sort=ascending"
</code></pre>

<p>As you can see the parameters are being encoded twice (the % signs are being encoded as %25), which of course, won't work.</p>

<p>Obviously, I am doing it wrong. But what is the right way? Or, do I need to ask the API developer to accept URL parameters like this?</p>

<pre><code>GET "/foo?filter=My+filter,+with+a+comma&amp;filter=Another+filter"
</code></pre>

<p>where multiple parameter values are stated separately, instead of being comma delimited?</p>