title: How to properly send URL parameters containing commas using AngularJS?
body: <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>