Post JSON data from AngularJS

Question

app.controller("blankCtrl", ['$scope', '$http', '$parse', function($scope, $http, $parse) {
    $scope.login = function() {
        $scope.spice = 'tooo';
        console.log("hiii");
        alert($("#loginform").serialize()); //-------mobile=9860292514&password=123456

        //  $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
        // $httpProvider.defaults.headers.post['Content-Type'] = 'application/JSON'; 
        var dataObj = {
            mobile: $scope.mobile,
            password: $scope.password
        };
        $http({
                method: 'POST',
                url: 'http://edudux.com/manage/index.php?/api/login',
                data:dataObj,
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .success(function(data, status, headers, config) {
                alert("status" + status); //-----------status200
                alert(angular.isObject(JSON)); // --------true            
                alert(JSON); //-------------[object JSON]

                var a = angular.toJson(dataObj);
                alert(a); //----------{}

                var b = angular.fromJson(dataObj);
                alert(b); //------------[object Object] 

                alert(data); //----------[object Object]
                alert(JSON.stringify(dataObj)); //----------{}
                console.log(JSON.stringify(dataObj));

            })
            .error(function(data, status, headers, config) {
                alert(status);
            });
    };
}]);

I am new to AngularJS, and developing a new application using AngularJS. I try to post a JSON Object with AngularJS $http Server. But I get an empty object as a response : "{}"

u need to pass the data parameter hhtp request – Naresh Kumar Mar 15 '17 at 12:46 — Naresh Kumar, Mar 15 '17 at 12:46
Where are you passing your `dataObj` in $http ? – Gangadhar Jannu Mar 15 '17 at 12:50 — Gangadhar Jannu, Mar 15 '17 at 12:50
@GangadharJannu data:dataObj – kalpita Mar 15 '17 at 15:28 — kalpita, Mar 15 '17 at 15:28

score 0 · Answer 1 · answered Mar 15 '17 at 13:03

Ypu need pass the dataObj in your http request as follows.

app.controller("blankCtrl",['$scope','$http','$parse',function ($scope,$http,$parse) {
 $scope.login = function() {
    $scope.spice = 'tooo';
   console.log("hiii");
 alert($("#loginform").serialize()); 
//  $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
// $httpProvider.defaults.headers.post['Content-Type'] = 'application/JSON'; 
var dataObj = {
            mobile : $scope.mobile,
            password : $scope.password
    };  

var config = {
                headers : {
                    'Content-Type': 'Content-Type':'application/json;'
                }
            }

             $http.post('http://edudux.com/manage/index.php?/api/login', dataObj, config)
            .success(function (data, status, headers, config) {
               alert(JSON.stringify(data));
            })
            .error(function (data, status, header, config) {
                alert('error');
            });

  }

}]);

Read [Why are angular $http success/error methods deprecated? Removed from v1.6?](http://stackoverflow.com/questions/35329384/why-are-angular-http-success-error-methods-deprecated-removed-from-v1-6/) — georgeawg, Mar 15 '17 at 20:12
@Naresh Kumar This code giving me error as {"Error":"mobile field is mandatory"} — kalpita, Mar 16 '17 at 04:14

e2rabi · Answer 2 · 2017-03-16T14:49:31.657

0

I think this will work for you :

app.controller("blankCtrl", ['$scope', '$http', '$parse','$q', function($scope, $http, $parse,$q) {
    $scope.login = function() {
        $scope.spice = 'tooo';
        console.log("hiii");
        alert($("#loginform").serialize()); //-------mobile=9860292516&password=123456

        //  $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
        // $httpProvider.defaults.headers.post['Content-Type'] = 'application/JSON'; 
        var dataObj = {
            mobile: $scope.mobile,
            password: $scope.password
        };
     var deferred = $q.defer();
     $http({
        method: 'POST',
        url:  'http://edudux.com/manage/index.php?/api/login',
        data: dataObj,
        headers: {'Content-Type': 'application/json'}
        }).success(function (data, status, headers, config) {
            deferred.resolve(data);
            console.log(deferred.promise);
            alert(data);

        }).error(function (data, status, headers, config) {
            console.log(data, status, headers, config);

        });

    };
}]);

edited Mar 16 '17 at 14:49

answered Mar 15 '17 at 15:28

e2rabi

4,728
9
42
69

Read [Why are angular $http success/error methods deprecated? Removed from v1.6?](http://stackoverflow.com/questions/35329384/why-are-angular-http-success-error-methods-deprecated-removed-from-v1-6/) – georgeawg Mar 15 '17 at 20:12
@Errabi Ayoub I have tried above code....I am getting response as [object Object] – kalpita Mar 16 '17 at 04:10
Yes because i didn't know what is the response of your WS if you have for example an object in response like class A { int a;int b} ,just you have to change it to alert(data.a) ; – e2rabi Mar 16 '17 at 09:06
my web service response is { "Success": [ "mobile": "9860292514", "password": "123456", } ] } – kalpita Mar 16 '17 at 09:19
you can try alert(data.mobile); or alert(data.password) this should return 9860292514 or 123456 as a value – e2rabi Mar 16 '17 at 09:29
alert(data.mobile); or alert(data.password) showing me "undefined" – kalpita Mar 16 '17 at 10:50
try to use alert(data.Success.mobile) if it's not working then in success function add $scope.data =data ;console.log($scope.data) and see what it gives in your browser console – e2rabi Mar 16 '17 at 11:07
when i am writing alert(data.Success.mobile) no alert is coming on screen. and when i am writing $scope.data =data ;console.log($scope.data) in the success function it is again giving response as [object Object] – kalpita Mar 16 '17 at 11:47
I updated my response try this new solution hope this will work – e2rabi Mar 16 '17 at 14:50
I am getting same response as [object Object] – kalpita Mar 18 '17 at 07:01
@ErrabiAyoub do u know any other way or method to do this?? – kalpita Mar 22 '17 at 04:52

score 0 · Answer 3 · answered Mar 16 '17 at 07:36

Shortcut method to perform POST request.

$scope.login = function () {
  // URL
  var reqURL = "http://edudux.com/manage/index.php?/api/login";

  // data
  var reqData = {
    mobile : $scope.mobile,
    password : $scope.password
  };

  $http.post(reqURL, reqData).then(function (response) {
    // response from server. after login
    console.log(response.data);
  });
};

Documentation: $http request documentation.

I hope to help you with my answer above!

Post JSON data from AngularJS

3 Answers3