Databases
StackOverflow2013
Postsdbo
POAngularJS - Using jQuery param to format resource GET verb query string
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAngularJS - Using jQuery param to format resource GET verb query string
    text
    copied!<p>I have a backend that understands query strings in the format jQuery's <code>$.param</code> returns. For instance, having an object like</p> <pre><code>{ search: "Miller", name: ["Felipe", "Fernanda"] } </code></pre> <p>Will request the URL with the following query string:</p> <pre><code>http://theurl/path?search=Miller&amp;name%5B%5D=Felipe&amp;name%5B%5D=Fernanda </code></pre> <p>Basically it uses <code>name[]=Felipe&amp;name[]=Fernada</code>, but URL encoded.</p> <p>The same object, when parsed by AngularJS ends up with this format:</p> <pre><code>http://theurl/path?search=Miller&amp;name=Felipe,Fernanda </code></pre> <p>Which my backend doesn't understand.</p> <p>Reading <a href="https://stackoverflow.com/questions/12190166/angularjs-any-way-for-http-post-to-send-request-parameters-instead-of-json" title="this question">this other question</a>, I thought that using transformRequest would help, however it doesn't. Here's my testing code:</p> <p><strong>HTML</strong></p> <pre><code>&lt;div ng-controller="UserCtrl"&gt; &lt;pre&gt;{{ data | json}}&lt;/pre&gt; &lt;/div&gt; </code></pre> <p><strong>JavaScript</strong></p> <pre><code>var myApp = angular.module('myApp',['ngResource']); var transformFn = function(data, headersGetter) { console.debug('transformRequest', data); if (!data) return; console.debug('data in', data); var dataOut = $.param(data); console.debug('data out', dataOut); return dataOut; }; myApp.config(['$httpProvider', function($httpProvider) { $httpProvider.defaults.transformRequest.push(transformFn); }]); myApp.factory('User', ['$resource', function($resource) { return $resource('/echo/:type/', {type:'json'}, { query: { method: 'GET' } }); }]); myApp.controller('UserCtrl', ['$scope', 'User', function($scope, User) { User.query({ seach: 'Miller', name: ['Felipe', 'Fernanda']}, function(data) { console.debug('data', data); $scope.data = data; }); }]); </code></pre> <p>​However, when you try to run this code, you will notice that the data attribute on <code>transformFn</code> is always undefined, and the query string stays in the AngularJS format.</p> <p>You can see this live in jsFiddle too: <a href="http://jsfiddle.net/fcoury/QKmnX/" rel="nofollow noreferrer">http://jsfiddle.net/fcoury/QKmnX/</a></p> <p>Any idea how I force the query string to use jQuery's $.param format?</p> <p><strong>EDIT</strong>: I was checking AngularJS code for branch v1.0.x and I couldn't find any way to change the Query String construction code, that takes place here:</p> <p><a href="https://github.com/angular/angular.js/blob/v1.0.x/src/ngResource/resource.js#L299-L306" rel="nofollow noreferrer">https://github.com/angular/angular.js/blob/v1.0.x/src/ngResource/resource.js#L299-L306</a></p> <p>Does anyone have any clever way to override that part of the ngResource class?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload