My angular submit function seems to be malfunctioning as it does not add any data or show any

Question

My angular submit function seems to be malfunctioning as it does not add any data or show any

Currently, I am exploring Angular and attempting to utilize the POST method for my REST API calls. Below is the function found in my typeCtrl.js file:

$scope.submit  = function() {
    alert("add new type [" + $scope.newtype + "]" );
    $http.post("http://192.168.1.115:8080/type/add", { 'type': $scope.newtype}, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(function(response) {
        console.log(response);
        console.log(response.data);
    });
    $http.get("http://192.168.1.115:8080/type").then(function(response) {
        console.log(response);
        console.log(response.data);
        $scope.all_types = response.data;
    });
};

The line

alert("add new type [" + $scope.newtype + "]" );

successfully triggers as expected, confirming that $scope.newtype contains a value.

Upon reviewing the output from my node.js backend, the following results are displayed:

POST /type/add 200 2.267 ms - 73
GET /type 200 23.854 ms - 6465
GET /type 304 22.217 ms - -
undefined
{ '{"type":"aaaa"}': '' }
POST /type/add 200 1.863 ms - 73
GET /type 200 26.053 ms - 6508
undefined
{ '{"type":"zzzzzzz"}': '' }
POST /type/add 200 1.734 ms - 73
GET /type 200 25.389 ms - 6551
undefined
{ '{"type":"zzzzzzz"}': '' }
POST /type/add 200 2.142 ms - 73
GET /type 200 25.435 ms - 6594

I suspect there might be an issue with how I am setting up the data. Could someone kindly assist me in identifying where I may be going wrong?

javascript angularjs

Answer 1

Answer №1

My task required me to do the following...

 33     $scope.submit  = function() {
 34         $scope.formdata = "{'type':'"+$scope.newtype+"'}";
 35         alert("add new type [" + $scope.newtype + "]" );
 36         var data = $.param({ type: $scope.newtype });
 37         $http.post("http://192.168.1.115:8080/type/add",
 38             // [{'type': $scope.newtype}],
 39             data,
 40             {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(function(response) {
 41             console.log(response);
 42             console.log(response.data);
 43         });
 44         $http.get("http://192.168.1.115:8080/type").then(function(response) {
 45             console.log(response);
 46             console.log(response.data);
 47             $scope.all_types = response.data;
 48         });
 49     };

Answer 2

My task required me to do the following...

 33     $scope.submit  = function() {
 34         $scope.formdata = "{'type':'"+$scope.newtype+"'}";
 35         alert("add new type [" + $scope.newtype + "]" );
 36         var data = $.param({ type: $scope.newtype });
 37         $http.post("http://192.168.1.115:8080/type/add",
 38             // [{'type': $scope.newtype}],
 39             data,
 40             {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(function(response) {
 41             console.log(response);
 42             console.log(response.data);
 43         });
 44         $http.get("http://192.168.1.115:8080/type").then(function(response) {
 45             console.log(response);
 46             console.log(response.data);
 47             $scope.all_types = response.data;
 48         });
 49     };

My angular submit function seems to be malfunctioning as it does not add any data or show any

Answer №1

Similar questions

Having trouble accessing functions in Typescript when importing JavaScript files, although able to access them in HTML

Utilizing webpack, gulp, and typescript to efficiently incorporate jQuery plugins

Comparing dates in JavaScript using the built-in Date object

Intensive analysis of objects comparing their characteristics

Can JQuery be used to specifically target attributes with vendor prefixes?

Load JavaScripts asynchronously with the function getScripts

What is the best approach for rendering content to a page in ReactJS when a user clicks on a dynamic URL?

Optimizing AngularJS ui-router to maintain state in the background

When incorporating express.static(), the Express .use() callback may be triggered multiple times

What is the purpose of the code snippet 'jQuery.each(lines, function(lineNo, line)'?

Executing Angular testing with the command $scope.$apply

Is it possible to deactivate an element based on a specific string present in the URL?

ReactJS - Experiencing an abundance of re-renders in Protected Route

Is there a way to trigger the interval on the second load and subsequent loads, rather than the initial load?

Amplify encounters the "Failed to load resource: the server responded with a status of 400" issue

Appium with Node.js (wd) becomes unresponsive when unable to locate element

Extracting the name from a JSON key/value pair and then adding it to a TextField

custom popup click event in angular leaflet directive does not work as expected on iOS devices

Using IF-ELSE statements in jQuery for DataTables

Having difficulty showing custom events on angular full calendar