Search code examples
javascriptangularjsnode.jsmongodbmeanjs

Trying to update MongoDB using Angular


How do I update an array element within a MongoDB Schema. I am using Mongoose to help handle the data manipulation.

The field within my schema I want to change currently looks like this:

players: [
    { type : Schema.ObjectId, ref: 'User' }
],

I am working on having users subscribe to certain events they wish to attend. The schema sample above is designed to hold a list of ID's associated with each user who have signed up to the event. I thought just holding IDs made sense rather then their full information in case they decided to change their name or other properties down the road.

<span ng-click="registerUser(pickupleague._id)" class="btn" ng-hide="registered" data-ng-show="authentication.user">
    Register for Game
</span>

The code above is set up to handle the click event for the user registering. This all works as expected.

<ul>
    <li ng-repeat="player in pickupleague.players">
        <span>{{getFirstName(player)}}</span>
    </li>
</ul>

Right now this loop returns nothing. This is how I know that my click event isn't writing to the database properly. It'll provide some problems in a minute as well.

$scope.registerUser = function(id) {
        var pickupleague = $scope.pickupleague; 

        $scope.registered = true;
        pickupleague.players.push($scope.authentication.user._id);
        console.log(pickupleague);
    };

The code above is where I start to run into some trouble. The console log shows that the correct information has been targeted at least within this session and the data looks like it has been updated. However upon page refresh the data is missing and when I use terminal to check my fields, there's no data.

What's more the loop goes funny. I try to loop through and with each user's id run a call to get the information required.

$scope.getFirstName = function (id) { 
        console.log('Got here too! ID is: %s', id);

        var players = Users.get({ 
            _id: id
        });
    };

The code runs the console log no problem, showing that the correct ID has been passed. However the next block of code ends up running and throwing the following error.

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []

Based on what I've read, I'm pretty sure I need to get my users defined before loading them into the ng repeat but I am really not sure.

I also feel like I can't properly tackle this bug until I figure out why the event registration only happens temporarily and doesn't write to the database.

Any help I can get would be very appreciated. I've been scouring on the line for help but I'm either not coming across anything that makes sense to me or I feel like it doesn't fit my situation.

Thanks in advance for any help you guys might be able to provide.

Cheers, Andrew

Updated with partial answer

Hey Everyone! I was able to figure part of it out which was the big problem. I still need to figure out my loop error but one step at a time.

The solution was the following:

$scope.registerUser = function(id) {

        $scope.registered = true;
        $scope.pickupleague.players.push($scope.authentication.user._id);

        $scope.pickupleague.$update(function() {
            $location.path('pickupleagues/' + pickupleague._id);
        }, function(errorResponse) {
            $scope.error = errorResponse.data.message;
        });

    };

I didn't realize that push didn't write to the database and that I needed to run an update afterwards. The joys of learning! Hopefully this will help someone else running into trouble.


Solution

  • You should inspect element and see what the loop is generating. I think there might be a problem with your getFirstName function. It doesnt return anything.

    Edit:

    $location.path('pickupleagues/' + pickupleague._id);
    

    The code snippet above would route you to this location. I think you just mean to push save this data ? Try looking into the $http Angular service.