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

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);

Answers


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.


Need Your Help

Refresh browser's page programmatically, from a .Net WinForms application

c# winforms browser refresh

From asp.net page, via ClickOnce deployment, a .Net WinForms application is started.

Performance issues with Groups in SignalR?

c# asp.net-mvc signalr signalr-hub

How much of a performance impact does having a large number of groups in SignalR cause? For example, take a social network where there are posts, and comments on those posts that need to be updated

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.