AngularJs use object in post

Question

I'm trying to pass a json object to my factory.login method so I can re use it.

This is my code:

Controller function

var data = {email:'test','password':'test'};

vm.login = function() {
            employeeFactory.login(vm.url, vm.data)
                    .then(function(response) {
                        console.log(response);
                    }, function(data)
                    {
                        console.log(data.status);
                    });
        }

Factory

factory.login = function(url,data) {
        return $http({
            'method': 'POST',
            'url': url,
            'data': $.param(
                data
            ),
            'headers': {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        });
    }
    return factory;

But the error is:

angular.js:13294 TypeError: Cannot read property 'jquery' of undefined
    at Function.n.param (jquery-2.2.2.min.js:4)
    at Object.factory.login (employeeFactory.js:14)
    at employeeController.vm.login (employeeController.js:16)
    at fn (eval at <anonymous> (angular.js:14138), <anonymous>:4:285)
    at b (angular.js:15151)
    at e (angular.js:24674)
    at m.$eval (angular.js:16895)
    at m.$apply (angular.js:16995)
    at HTMLButtonElement.<anonymous> (angular.js:24679)
    at HTMLButtonElement.n.event.dispatch (jquery-2.2.2.min.js:3)

seems like you have a problem with injecting jquery to your code. are you minimizing your code? — z.a., Mar 22 '16 at 13:26
also in your html make sure script tag for jquery comes before angularjs — z.a., Mar 22 '16 at 13:27
You can try this too: http://stackoverflow.com/questions/24255195/convert-param-in-angularjs — Dhananjaya Kuppu, Mar 22 '16 at 13:31
As per [this question](http://stackoverflow.com/questions/23150139/typeerror-cannot-read-property-jquery-of-undefined), which is basically identical, $.param is probably the culprit. — colonelsanders, Mar 22 '16 at 13:32

Medet Tleukabiluly · Answer 1 · 2016-03-22T13:53:01.497

This should be vm.data

vm.data = {email:'test','password':'test'};

And factory doesn't require jQuery at all, just use below construction

factory.login = function(url,data) {
    return $http({
        'method': 'POST',
        'url': url,
         //don't use $.param, as you need jQuery dependency for that
         //for x-www-form-urlencoded you have to use this construction
         //email=test&password=test
        'data': 'email=' + data.email + '&password=' + data.password, 
        'headers': {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    });
}
return factory;

But consider using JSON type on server request handler, as it's much easier

score 1 · Answer 2 · answered Mar 22 '16 at 13:30

1

Your JSON seems incorrect. Should be:

var data = { "email": "test", "password": "test"};

Also the $http.post function is available:

$http.post(url, data, [{headers: { 'Content-Type' : 'application/x-www-form-urlencoded'}]);

answered Mar 22 '16 at 13:30

cani

91
7

score 1 · Answer 3 · answered Mar 22 '16 at 13:48

JSON is a format to serialize object, so it's a string. You have your object as data that contains the data to be sent to the server, so just do this:

Just put your data object in it:

factory.login = function(url,data) {
    return $http({
        'method': 'POST',
        'url': url,
        'data': data
    });
}
return factory;

Angular will send json to the server in the payload. You don't need to do that serialization your self.

Documentation https://docs.angularjs.org/api/ng/service/$http -> Default Transformations ->

Request transformations ($httpProvider.defaults.transformRequest and $http.defaults.transformRequest):

If the data property of the request configuration object contains an object, serialize it into JSON format. Response transformations ($httpProvider.defaults.transformResponse and $http.defaults.transformResponse):

If XSRF prefix is detected, strip it (see Security Considerations section below). If JSON response is detected, deserialize it using a JSON parser.

The stack trace show the following error :

TypeError: Cannot read property 'jquery' of undefined

score 1 · Answer 4 · answered Mar 22 '16 at 13:54

miss match variable uses declared var data = {} but used vm.data in your controller. should declare as

vm.data= {email:'test','password':'test'}

or

use data in employeeFactory.login(vm.url, data) if declare as var data= {}

and in your factory no need to use $.param can send as argument in post method like

$http.post(url, data, [{headers: { 'Content-Type' : 'application/x-www-form-urlencoded'}]);

Angular Documentation

AngularJs use object in post

4 Answers4