AngularJS sends nil parameters to API

Question

I created a basic API with Ruby on Rails. Whenever I try to send data from a form in AngularJS, I get this message in the Rails Server:

Parameters: {"{\"content\":\"message\"}"=>nil}

So, it's creating null records in the DB.

This is the controller in AngularJS to send the data:

app.controller('postController', function($scope, $http) {
  // create a blank object to handle form data.
    $scope.message = {};
  // calling submit function.
    $scope.submitForm = function() {

    $http({
      method  : 'POST',
      url     : 'http://localhost:3000/api/v1/messages',
      data    :  $scope.message, //forms user object
      headers : {'Content-Type': 'application/x-www-form-urlencoded'} 
     })
      .success(function(data) { ... }
      });
    };
});

have you verified the contents of $scope.message before you POST? What if you remove the content type? — Ronnie
– Ronnie, Commented Feb 17, 2016 at 21:13

charlietfl · Accepted Answer · 2016-02-17 21:22:43Z

3

You need to serialize the data when you send as x-www-form-urlencoded

Example copied from docs

.controller(function($http, $httpParamSerializerJQLike) {
  //...

  $http({
    url: myUrl,
    method: 'POST',
    data: $httpParamSerializerJQLike(myData),
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });

});

Or use the defaults of $http which sends JSON in request body as application/json:

$http.post(myurl, data).then(...;

answered Feb 17, 2016 at 21:22

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gabriel Alejandro Over a year ago

(Part 1) Thank you, now is the Rails Server is throwing me a different error: ArgumentError (When assigning attributes, you must pass a hash as an argument.)

Gabriel Alejandro Over a year ago

Create Method in rails is: def create respond_with Message.create(params[:content]) end

Gabriel Alejandro Over a year ago

Ok, don't worry: I fixed it with this: data : {'message': $scope.message} Thank you a lot

Lucas · Accepted Answer · 2016-02-17 21:27:54Z

2

change this line:

headers : {'Content-Type': 'application/x-www-form-urlencoded'}

to:

headers : {'Content-Type': 'application/json'}

Also encode to Json if it isnt like this:

  data    :  angular.toJson($scope.message), //forms user object

This way you will send the correct JSON formatted data to API, make sure your API accepts Json encoded data just in case.

edited Feb 17, 2016 at 21:27

answered Feb 17, 2016 at 21:24

Lucas

10.4k6 gold badges45 silver badges55 bronze badges

7 Comments

charlietfl Over a year ago

no need to set 'application/json' ... that is the default and don't use toJson that is already done internally. Can see it already in OP's request

Lucas Over a year ago

hey, you are right but thought it would be better to have the default written instead of what i thought wouldnt work: x-www-form-urlencoded

charlietfl Over a year ago

except then OP would think it was needed every time and others who read this later with similar problems might think so also

Lucas Over a year ago

you saw the best solution for sure, this is how I would have started to solve the problem. I just see it weird sending this content type application/x-www-form-urlencoded for json data

Gabriel Alejandro Over a year ago

(Part 1) This solution worked too, but now Rails is throwing me a different message: ArgumentError (When assigning attributes, you must pass a hash as an argument.)

|

Collectives™ on Stack Overflow

AngularJS sends nil parameters to API

2 Answers 2

3 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related