HoosierCoder HoosierCoder - 25 days ago 8
AngularJS Question

How to serialize GET params with Nested Objects

I need to send in the following get request via Angular. Upon this request I have a rails server that takes in the param and returns JSON data.

GET request needed:


http://localhost:8080/clients.json?c[year][]=&c[year][]=2016&c[year][]=2015


Angular code so far:

$http({method: 'GET', url: '/clients.json', params:{???}.success(function(data){
//angular does something
});


How would I send in the year parameters in Angular, so that the the server recognizes the c[year][2016] - nested array format? Basically, how would I properly replace the ??? in the code provided?

Answer

Use $httpParamSerializerJQLike:

var myUrl = '/clients.json'
var myParams = {c: {year: ["2015", "2016"]}};

$http({
  url: myUrl,
  method: 'GET',
  params: myParams,
  paramSerializer: '$httpParamSerializerJQLike'
});

The $httpParamSerializerJQLike service is the alternative $http params serializer that follows jQuery's param() method logic.

JSON:   {"c":{"year":[2014,2015]}}
Encode: c%5Byear%5D%5B%5D=2014&c%5Byear%5D%5B%5D=2015
Decode: c[year][]=2014&c[year][]=2015

The DEMO on JSFiddle