How to post an array of objects from Angular (Restangular) to Rails 4 Backend

09 Apr How to post an array of objects from Angular (Restangular) to Rails 4 Backend

Well thank you very much to lucasroesler for his post at: https://coderwall.com/p/uqttoa/post-x-www-form-urlencoded-data-with-restangular, I tried to follow up the post because as he says “I had hard time to understand how I could send my data with Restangular”, his solution it is really good but rails is not receiving the params as an object for that reason I have implemented a similar approach for that reason, the good thing about this it is that you don’t actually need to parse the string from rails with JSON.parse within your controller, so let’s take a look first at this solution and then my own solution:

His example looks something like so:

var params = {
 district_selected: true,
 sections_selected: [
  { 
    id: 5,
    name: '6'
  },
  {
    id: 7,
    name: '25'
  }
 ]
}
var model_report ='api/v1/reports';
var data_encoded = $.param(params);
# this will send the params to the endpoint api/v1/reports/create_report
return Restangular.all(model_report)
                  .customPOST(data_encoded,
                              'create_report',
                               undefined,
                               {'Content-Type': "application/x-www-form-urlencoded; charset=UTF-8"});

the problem with that code is that in my rails controller I’m not receiving the params as an object this is how it looks like the params from the rails console:

{"district_selected"=>"false",
 "zone_selected"=>"false",
 "sections_selected"=>{"0"=>{"name"=>"6", "id"=>"5", "$$hashKey"=>"object:249"}, "1"=>{"name"=>"7", "id"=>"25", "$$hashKey"=>"object:247"}},
 "controller"=>"api/v1/reports",
 "action"=>"create_report"}

So if you really want to work with your params as an object you can use something like so:

var params = {
 district_selected: true,
 sections_selected: [
  { 
    id: 5,
    name: '6'
  },
  {
    id: 7,
    name: '25'
  }
 ]
}
var model_report ='api/v1/reports';
var data_encoded = JSON.stringify(params);
# this will send the params to the endpoint api/v1/reports/create_report
return Restangular.all(model_report)
                   .customPOST(data_encoded,
                               'create_report',
                               data_encoded,
                               {'Content-Type': 'application/json'})

and if you inspect your params from the controller you are going to see something like:

{"district_selected"=>false,
 "zone_selected"=>false,
 "sections_selected"=>[{"name"=>2, "id"=>2, "$$hashKey"=>"object:246"}, {"name"=>3, "id"=>16, "$$hashKey"=>"object:248"}],
 "controller"=>"api/v1/reports",
 "action"=>"create_report",
 "report"=>{"district_selected"=>false, "zone_selected"=>false, "sections_selected"=>[{"name"=>2, "id"=>2, "$$hashKey"=>"object:246"}, {"name"=>3, "id"=>16, "$$hashKey"=>"object:248"}]}}

now you can iterate over your array of objects:

params[:report][:sections_selected].map{|section| puts section}

UPDATE: I just found that you can also do the following(even simpler):

model_report = 'api/v1/reports/create_report';
_data = {};
_data.district_selected = true;
_data.sections_selected = [{},{}];
return Restangular.all(model_report).post(_data);

And that’s it so simple right.

H.