MEAN Stack CRUD todolist giving infinite list, won't delete

StackOverflow https://stackoverflow.com/questions/20477516

Question

I've been banging my head against this for days and I'm still unsure what's wrong. I'm getting an infinite list of items as soon as I load localhost. These items are usually empty and don't contain anything. And when I try to delete them I get a 404 error that says, 'api/todos/undefined.'

Below is the code. I'm sorry if it's a lot. I just have no idea where the error could be. Maybe it's in the naming? There's also definitely a routing problem.

var mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/');

var Todo = mongoose.model('todos', {
    text : String
});

module.exports.Todo = Todo;

Controller

var baselTodo = angular.module('baselTodo', []);

function mainController($scope, $http) {
    $scope.formData = {text: ''};

    // when landing on the page, get all todos and show them
    $http.get('/api/todos')
        .success(function(data) {
            $scope.todos = data;
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });


    // when submitting the add form, send the text to the node API
    $scope.createTodo = function() {
        $http.post('/api/todos', $scope.formData)
            .success(function(data) {
                $scope.todos = data;
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
        $http.get('/api/todos').success(function(data) {
            $scope.todos = data;
        })
    };

    // delete a todo after checking it
    $scope.deleteTodo = function(id) {
        $http.delete('/api/todos/' + id)
            .success(function(data) {
                $scope.todos = data;
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };

    {
    $scope.updateTodo = function(id) {
       $scope.newItem = prompt("Please enter your new item: ", "");
        $http.put('/api/todos/' + id, {text: $scope.newItem}).success(function(data) {
                $scope.todos = data;
            });

            $http.get('/api/todos').success(function(data) {
                $scope.todos = data;
            });
    }};




};

html

<body ng-controller="mainController">

<div class="container">
    <div id="person-form">
        <form>

            <div class="form-group">
                <h1>Enter Item:</h1>
                <input type="text" ng-model="formData.text">
            </div>

            <button ng-click="createTodo()">Create</button>

            <h3>Current List:</h3>
            <ul ng-repeat="todo in todos">
                <li> {{todo.text + " || ID: " + todo._id}} </li>
                <button ng-click="updateTodo(todo._id)">Update</button>
                <button ng-click="deleteTodo(todo._id)">Delete</button>
            </ul>

        </form>
    </div>
</div>

</body>
</html>

server

// ================== SERVER.JS ========================

    // set up ------------------------------------------
    var api = require('./routes/api');
    var express = require('express');
    var app = express();    

    // configuration -----------------------------------
    app.configure(function() {
        app.use(express.static(__dirname + '/public'));
        app.use(express.logger('dev'));
        app.use(express.bodyParser());
        app.use(express.methodOverride());
    });

    // listen (start app with node server.js) ----------
    app.listen(3000);
    console.log("App listening on port 3000");

    // routing -----------------------------------------

    // Main Page
    app.get('/', function(req, res) {
        res.sendfile('./public/index.html');
    });

    // API Routing
    app.get('/api/users', api.read);
    app.post('/api/users', api.create);
    app.put('/api/users/:_id', api.update);
    app.delete('/api/users/:_id', api.delete);
Was it helpful?

Solution

You're missing a semicolon in your server.js file. You want this: 

app.put('/api/todos/:_id', api.update);

Add a semicolon to the other one too.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top