Angularjs $HTTP POST JSON data to server issue

Question

I'm trying to send JSON data from a front-end form (angularJS) to the server (express/nodejs) then to MongoDB. However, I can't seem to send the data, when I log the data at the server end it gives me an empty data field (see pic below).

Client Front-end HTTP POST code

  $http(
  {
   method: 'POST',
   url: 'http://localhost:3456/todo',//Server URL  
   headers: {
    'Content-Type': 'application/json',
    'Accept':'application/json' 
  },
  data: {item:'From Angular'}


}).then(function successCallback(response) {
    console.log('Congrats, sent to Server');
    console.log(response);

}, function errorCallback(response) {
   console.log('Not sent to Server');
   console.log(response);

});

Server end (POST request handler)

    app.post('/todo',jsonParser,function(req,res){
    var newTodo = Todo(req.body).save(function(err,data){
    console.log(data);
    console.log(req.body);
    if(err) throw err;
    res.json(data);
      });
    });

Client-end POST request (from angularjs)

How it should be

The problem is I can't seem to send the "data" to the server. On the server-side, it shows up empty as shown in Image 1. All the data ends up inside config -> data(as shown in 1) whereas the data field is empty.

I could not identify the error. You are actually adding the data to the bank and then sending the bank operation response to `res.json (data)`. Client-side print (`console.log (response)`) is the bank response (added document id) — Rubens Barbosa, Dec 12 '19 at 20:44
It can never be as shown (entry from the server). Nowhere in your code do you specify the words "Buy a House". — barrypicker, Dec 12 '19 at 21:48

score 0 · Answer 1 · answered Dec 12 '19 at 20:03

Please find below the working code that I used, hope it would be helpful:

JSON (idList.json):

[
{
    "id": "G01032014",
    "password": "1234"
},
{
    "id": "G01032015",
    "password": "12345"
},
{
    "id": "G01032016",
    "password": "123456"
}

]

server.js :

app.post('/authenticate', function(req, res) {
console.log(req.url);
var id = (req.body.id); 
var pass = (req.body.pass); 
console.log(id);
console.log(pass);
var sendData = {
        "status":false,
        "user":id
    };

var readId = require('./idList.json');  
for(var i=0;i<readId.length;i++) {
    if(id == readId[i].id && pass == readId[i].password) {
        console.log('matched');
        sendData.status = true;
        i=readId.length;
    }
}   
res.end(JSON.stringify(sendData));
});

AngularJs Controller:

$scope.auth = function() {      

    if($scope.id == "" || $scope.pass == null){
            alert('please fill details');
    } else {
        var subData = {
        "id":$scope.id,
        "pass":$scope.pass
        };

        $http.post('/authenticate', subData).success(function(data) {
            $scope.reponse = data;
            console.log($scope.reponse.status);
            if ($scope.reponse.status) {
                $scope.activate = false;
            } else {
                alert('incorrect id or password');
            }
        });
    }
    $scope.id = '';
    $scope.pass = '';
};

HTML :

<div>
        <span>Login</span><hr>
        User id :<input type="text" ng-model="id" value="id" placeholder="user id" />
        Password: <input type="password" ng-model="pass" value="pass" 
placeholder="password" />
        <input type="submit" value="Login" ng-click="auth()" />
    </div>

The `.success` methid has been [removed from the AngularJS framework](https://stackoverflow.com/questions/35329384/why-are-angularjs-http-success-error-methods-deprecated-removed-from-v1-6/35331339#35331339) — georgeawg, Dec 13 '19 at 00:14

Angularjs $HTTP POST JSON data to server issue

1 Answers1