Unexpected behavior encountered when using the $http.post method

Question

Unexpected behavior encountered when using the $http.post method

I've been working with a component that I utilized to submit data to the Rest API. The code snippet for the component is as follows:

(function(angular) {
    'use strict';
    angular.module('ComponentRelease', ['ServiceRelease'])
        .component('createRelease', {
            templateUrl: 'components/release/createRelease.html',
            controller: CreateRelease,
            controllerAs: 'clCtrl',
        })

    function CreateRelease($http, getReleaseManagers, insertRelease) {
        var ctrl = this;

        this.$onInit = function() {
            getReleaseManagers.promise($http).then(function(response) {
                ctrl.managers = response.data.releasemanager;
            });

            //the save button
            ctrl.save = function() {
                var release = { "rName": ctrl.r_name, "releaseDate": ctrl.r_date, "releaseSharepoint": ctrl.r_sharepoint, "gManager": ctrl.gname, "pManager": ctrl.pname };

                $http.post('http://localhost:8080/post', release).then(function(response) {
                    console.log("Save in database");
                }, function(e) {
                    console.log(e);

                });
            };
        };
    };
})(window.angular);

When I check the console log after saving, I see "undefined" if it was successful and an error message if there were any errors. Is my understanding correct? If the post was successful, shouldn't I see the message "Save in Database"? I would appreciate your insights on this matter. I am currently using angularjs 1.6

Thank you for your assistance, Eugen

javascript angularjs

Answer 1

Answer №1

When posting in Angular, make sure to include the header content-type in the configuration so that the server can properly parse the data type (application/json).

(function(angular) {
  'use strict';
  angular.module('ComponentRelease', ['ServiceRelease'])
    .component('createRelease', {
      templateUrl: 'components/release/createRelease.html',
      controller: CreateRelease,
      controllerAs: 'clCtrl',
    })

  function CreateRelease($http, getReleaseManagers, insertRelease) {
    var ctrl = this;

    this.$onInit = function() {
      getReleaseManagers.promise($http).then(function(response) {
        ctrl.managers = response.data.releasemanager;
      });

      //the save button
      ctrl.save = function() {
        var release = {
          "rName": ctrl.r_name,
          "releaseDate": ctrl.r_date,
          "releaseSharepoint": ctrl.r_sharepoint,
          "gManager": ctrl.gname,
          "pManager": ctrl.pname
        };

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

        $http.post('http://localhost:8080/post', release, config).then(function(response) {
          console.log("Save in database");
        }, function(e) {
          console.log(e);

        });
      };
    };
  };
})(window.angular);

Answer 2

When posting in Angular, make sure to include the header content-type in the configuration so that the server can properly parse the data type (application/json).

(function(angular) {
  'use strict';
  angular.module('ComponentRelease', ['ServiceRelease'])
    .component('createRelease', {
      templateUrl: 'components/release/createRelease.html',
      controller: CreateRelease,
      controllerAs: 'clCtrl',
    })

  function CreateRelease($http, getReleaseManagers, insertRelease) {
    var ctrl = this;

    this.$onInit = function() {
      getReleaseManagers.promise($http).then(function(response) {
        ctrl.managers = response.data.releasemanager;
      });

      //the save button
      ctrl.save = function() {
        var release = {
          "rName": ctrl.r_name,
          "releaseDate": ctrl.r_date,
          "releaseSharepoint": ctrl.r_sharepoint,
          "gManager": ctrl.gname,
          "pManager": ctrl.pname
        };

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

        $http.post('http://localhost:8080/post', release, config).then(function(response) {
          console.log("Save in database");
        }, function(e) {
          console.log(e);

        });
      };
    };
  };
})(window.angular);

Unexpected behavior encountered when using the $http.post method

Answer №1

Similar questions

What sets declaring variables apart in Vue?

What distinguishes setting a $watch on a string variable from setting a $watch on an object's key in AngularJS?

What is the best way to use JavaScript to click on a block and retrieve its attribute value?

Angular 2: Issue with Component not reinitializing when query parameters change

Selecting a value will cause other blocks to vanish

A guide on using Javascript to write information to a JSON file

Navigating with AngularJS through link redirection using anchor tags

What is the interaction between Vue's v-model and the update:modelValue directive, and how can we customize the default behavior to prevent it from

Forget the function once it has been clicked

Having difficulty parsing or assigning JSON response: The response is being interpreted as [object Object]

Please send the element that is specifically activated by the onClick function

Strategies for handling missing and unused keys in i18n language files

What could be causing axios to not function properly when used with async/await in this particular scenario

Displaying a notification for a multi-selection using JavaScript

Tips for incorporating dynamic URLs in Next.js

Refresh a particular element using javascript

Transform jQuery code to its equivalent in vanilla JavaScript

Resizing an image with six corners using the canvas technique

Cross-Origin Resource Sharing (CORS) issue: The Access-Control-Allow-Headers in preflight response does not allow the Authorization request header field

Executing javascript href using Python in Selenium