将JSON数据从angularjs发送到Node.js

Question

I having a problem in sending json data from front end angularjs to express nodejs. Here is what i have tried.

frontend.html page

<form ng-submit="func()">
    <textarea name="inputtext" type="text" ng-model="sentence"></textarea>
</form>

backend.js page

$scope.func = function(){

 $scope.jsondata = {"status":"OK","language":"english","sentences":[{"sentence":"That's a nice restaurant."},{"sentence":"Also I went to another bad restaurant."},{"sentence":"I didn't like that movie."}]}

 $http.post('/sample',$scope.jsondata).success(function(data,status){
        console.log("Success");
     })
}

server.js

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var bodyParser = require('body-parser');
var path = require('path');
var fs = require('fs');

app.set('views', __dirname + '/views');
app.set('view engine' , 'ejs');

app.use(bodyParser.json());
var urlencodedParser = bodyParser.urlencoded({ extended: true });

app.use(express.static('public'));

app.get('/',function(req,res){
    res.render('index',{ title: 'Sentence' });
});
app.post('/sample',urlencodedParser,function(req,res){
    console.log(req.body);
});
http.listen(8888, function(){
   console.log("Server listening on 8888");
});

I am not getting exact JSON in the node server part. This is what i am getting.

output

{ '{"status":"OK","language":"english","sentences":': { '{"sentence":"That\'s a nice restaurant."},{"sentence":"Also I went to another bad restaurant."},{"sentence":"I didn\'t like that movie."},{"sentence":"Thats a very bad movie."}': '' } }

Can any one help, how can i get exact json in the node server part. So that i can parse and write only sentence field into a file.

Answer 1

$http POST call, takes Object, not json.So you need to stringify your JSON before sending it to server.

$http.post('/sample',JSON.stringify($scope.jsondata)).success(function(data,status){
        console.log("Success");
     })
}

Answer 2

Are you creating the post as JSON to send to node?

Angular will do this for you, you can put and object in the post as Ved suggests and Angular will magically change this to a JSON to send to the node server.

$scope.func = function(){

$scope.data = {language:"english", sentences:   [{sentence:"That's a nice restaurant."},{sentence:"Also I went to another bad restaurant."},    {"sentence":"I didn't like that movie."}]}

$http.post('/sample',$scope.data).success(function(data,status){
    console.log("Success");
 })
}

This will read on the server as: [Object object] as the bodyparser npm module in node will change it back to an Object

Answer 3

Try to set the datatype to json before send to the server. It will set the Content-Type header to application/json which the server can understand as a json

$http({
    method: 'POST',
    url: baseUrl + '/sample',
    dataType: "json",
    data: {
        "status": "OK",
        "language": "english",
        "sentences": [{"sentence": "That's a nice restaurant."},
            {"sentence": "Also I went to another bad restaurant."},
            {"sentence": "I didn't like that movie."}]
    }
}).success(function (data, status) {

}).error(function (data, status) {

})

Update: I tried to run your source code and modify a little bit, you can check if it response the right format that you want. Checkout this repo: https://github.com/nguyennb9/sample-angularjs-expressjs

Answer 4

Use application/json in header while POST method

 $http({
    method:'POST',
    dataType: "json",
    url: 'http://localhost:8000/saveform',
    data : $scope.user, 
    headers: {
      'Content-Type': 'application/json' 
    }
  }).success(function(data){

  });