angularjs $http post is not sending data

Question

I am little bit frustrated with my below angular code, as it is not sending the JSON data to my spring boot based micro-service running in the same machine. Please help me out! FYI, I am a newbie to JavaScript world.

$scope.addBook = function() {
    var data = $.param({
        json: JSON.stringify({
            name: $scope.bookName,
            isbn: $scope.isbn,
            author: $scope.authorName,
            pages: $scope.pages
        })
    });

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

    var result = $http.post('http://localhost:8080/book', data, config);
    result.success(function (data, status, headers, config) {
        $scope.result = JSON.stringify({data: data});
    });
    result.error(function (data, status, header, config) {
        $scope.result = JSON.stringify({data: data});
    });
};

What you are getting in your console ? where you are getting error ? are you able to access the success data after success callback ? — ojus kulkarni
– ojus kulkarni, Commented Mar 8, 2016 at 17:44

Prashant · Accepted Answer · 2016-03-08 17:44:50Z

3

You don't need to run JSON.stringify or $.param, just pass the object directly to $http.post(). Angular creates the JSON for you.

answered Mar 8, 2016 at 17:44

Prashant

8,1403 gold badges27 silver badges25 bronze badges

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

Comments

maxshuty · Accepted Answer · 2020-04-22 12:15:30Z

Just pass your data object like this:

$scope.addBook = function() {
        var data = 
            {
                name: $scope.bookName,
                isbn: $scope.isbn,
                author: $scope.authorName,
                pages: $scope.page
        };

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

        var result = $http.post('http://localhost:8080/book', data, config);
        result.success(function (data, status, headers, config) {
            $scope.result = JSON.stringify({data: data});
        });
        result.error(function (data, status, header, config) {
            $scope.result = JSON.stringify({data: data});
        });
    };

You don't need to stringify it. You probably can remove the stringify form the result you get too if your service is returning JSON.

I had another issue - XMLHttpRequest cannot load 127.0.0.1:8080/book. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:63342' is therefore not allowed access. Which I have fixed using this link : stackoverflow.com/questions/20035101/…

Matthias · Accepted Answer · 2016-03-08 17:46:53Z

I think $http does not send stingifyed data.

Try

$scope.addBook = function() {
    var data = {
            name: $scope.bookName,
            isbn: $scope.isbn,
            author: $scope.authorName,
            pages: $scope.pages
        };

    $http.post('http://localhost:8080/book', data)
        .success(function (data, status, headers, config) {
            $scope.result = JSON.stringify({data: data});
        })
        .result.error(function (data, status, header, config) {
            $scope.result = JSON.stringify({data: data});
        });
};

amanpurohit · Accepted Answer · 2016-03-08 17:46:59Z

0

Change your data to the following. It should work

var data = $.param({
                'name': $scope.bookName,
                'isbn': $scope.isbn,
                'author': $scope.authorName,
                'pages': $scope.pages
        });

answered Mar 8, 2016 at 17:46

amanpurohit

1,29611 silver badges20 bronze badges

Collectives™ on Stack Overflow

angularjs $http post is not sending data

4 Answers 4

Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Linked

Related