Data undefined at Node.js from AngularJS POST request

Question

I am attempting to send a fairly simple POST request to my server using AngularJS. The request goes through and hits my controller on the back end, but for some reason req.data is showing up as undefined.

Front End Controller:

function CardDirectiveController($http, $scope) {
    var self = this;

    self.addToFavorites = function() {
        let card = {
            id: $scope.$id,
            attack : $scope.attack,
            cost: $scope.cost,
            img: $scope.img,
            name: $scope.name,
            class: $scope.class,
            rarity: $scope.rarity,
            type: $scope.type
        }

        return $http({
            method: 'POST',
            url: '/card',
            data: card
        })
    };
}
angular.module('cardDirective').controller('CardDirectiveController', CardDirectiveController);

Server

'use strict';

let express = require('express'),
    path = require('path'),
    router = require('./routes/sampleRouter'),
    cardRouter = require('./routes/cardRouter');


let app = express();

// Serve any requests for static files (like index.html)
app.use(express.static(path.join(__dirname + '/public/')));

// Use any routing rules found in the router file
app.use('/', router);
app.use('/card', cardRouter)



app.listen(PORT, function() {
    console.log('Application live and running on port: ' + PORT);
});

Router:

'use strict';

let express = require('express'),
    cardController = require('./../controllers/cardController');

let router = express.Router();

router.route('/').post(cardController.postCard);
router.route('/:cardName').get(cardController.showCards);


module.exports = router;

Back End Controller

'use strict';

let cardController = {
    showCards: showCards,
    postCard: postCard
};

module.exports = cardController


function showCards(req, res) {
    console.log('showCards ', req.params.cardName);
    res.end()
}

function postCard(req, res) {
    console.log('postCard ', req.url, req.method, req.data)
    res.end()
}

The response I am getting in the console from making this request is postCard / POST undefined. Console logging the card object returns the expected result. I feel like I must be missing something obvious, but I've been stuck for a while now.

please use body-parser middleware in your app.js.. https://www.npmjs.com/package/body-parser — Atul Agrawal
– Atul Agrawal, Commented Aug 25, 2017 at 19:53

alexmac · Accepted Answer · 2017-08-25 19:56:11Z

2

You need to use bodyParser middleware to parse request body.

Install the body-parser module:

$ npm install body-parser

Configure it in app.js :

var bodyParser = require('body-parser');

// parse application/json
app.use(bodyParser.json());

In your controller use req.body instead of req.data:

function postCard(req, res) {
   console.log('postCard ', req.url, req.method, req.body);
   res.end();
}

answered Aug 25, 2017 at 19:56

alexmac

19.7k7 gold badges64 silver badges74 bronze badges

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

Comments

Atul Agrawal · Accepted Answer · 2017-08-25 19:58:21Z

Please use body-parser in your app.js file. Change your server.js file to following code

    'use strict';

    let express = require('express'),
        path = require('path'),
        router = require('./routes/sampleRouter'),
        cardRouter = require('./routes/cardRouter'),
        bodyParser = require('body-parser');




    let app = express();

    // Serve any requests for static files (like index.html)
    app.use(express.static(path.join(__dirname + '/public/')));
    // parse application/json
    app.use(bodyParser.json());

    // Use any routing rules found in the router file
    app.use('/', router);
    app.use('/card', cardRouter)



    app.listen(PORT, function() {
        console.log('Application live and running on port: ' + PORT);
    });

Collectives™ on Stack Overflow

Data undefined at Node.js from AngularJS POST request

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related