3

I'm making a simple todo app. I'm using angular for the frontend and nodejs for the backend. After doing some debugging I now can post data to my mongodb database using Postman though when I do it on my website a new object is being created on the database but without the values that I've given to the object.

This is my model and how I connect to the database:

var mongoose.connect('mongodb://localhost:27017/tododb');
var Todo = mongoose.model('Todo', {
name: String });

and here is how I handle the request:

app.post('/api/todos', function(req, res){
  Todo.create({name: req.body.name, checked: false},
  function(err, todo){
    if(err) res.send(err);
    Todo.find(function(err, todos){
      if(err) res.send(err);
      res.json(todos);
    });
  });
});

I'm also using bodyparser to handle the data:

app.use(bodyParser.urlencoded({ extended: true }));

This is my function on the frontend (AngularJS):

$scope.formData = {};    
$scope.addTodo = function() {
    $http.post('/api/todos', $scope.formData)
        .success(function(data) {
            $scope.todos = data;
            $scope.formData = {}; // clear the form so our user is ready to enter another
            console.log(data);
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });
    };

Another problem is that the $scope.formData = {} doesn't clear the input field.

And lastly this is the part of my html file that displays the todos:

  <h1>Things you have to do</h1>
  <li ng-repeat="todo in todos">
    <p id="todobox"> {{ todo.name }} </p>
  </li>
  <form>
    <input type="text" placeholder="I need to do..." ng-model="newTodo">
    <button ng-click="addTodo()">Add</button>
  </form>

This is the result I get when I visit localhost:300/api/todos

[{"_id":"57275afef11dc77b17a90eda","__v":0},

{"_id":"57275b5ef11dc77b17a90edb","name":"test from postman","__v":0}]

The first one was created from my input box by clicking the add button, the second one was created by sending a post request with Postman and telling it what the name value is.

||||||
0

[EDITED] Have you tried changing your input and making sure you use a .:

JS

$scope.info = {todos:[], newPost:{name:''}};    
$scope.addTodo = function() {
  $http.post('/api/todos', $scope.info.newPost)
    .success(function(data) {
        $scope.info.todos = data;
        $scope.info.newPost = {}; // clear the form so our user is ready to enter another
        console.log(data);
    })
    .error(function(data) {
        console.log('Error: ' + data);
    });
};

HTML

  <h1>Things you have to do</h1>
  <li ng-repeat="todo in info.todos">
    <p id="todobox"> {{ todo.name }} </p>
  </li>
  <form>
    <input type="text" placeholder="I need to do..." ng-model="info.newPost">
    <button ng-click="addTodo()">Add</button>
  </form>
||||||
  • Nope, I still get the same thing, though Ι changed the value to formData. – captain May 2 '16 at 14:12
0

It looks like you have too many variables to store the data. You expect it to be stored in formData, but it's actually stored in newTodo.

Your HTML should look like:

<form>
  <input type="text" placeholder="I need to do..." ng-model="formData.name">
  <button ng-click="addTodo()">Add</button>
</form>
||||||
  • hmm, the name value still doesn't register to the database – captain May 2 '16 at 14:32
  • Can you debug the Node server and verify that the data is transferred in the request body? – Yaron Schwimmer May 2 '16 at 14:34
  • Did a simple console.log(req.body.name) and I get undefined, seems that this is the problem – captain May 2 '16 at 14:41
  • So let's go one step back. Can you do console.log($scope.formData) as the first line of addTodo (before calling $http) – Yaron Schwimmer May 2 '16 at 14:45
  • I've fixed the issue. It was a problem with bodyParser. Thank you for the help – captain May 2 '16 at 14:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.