CODEWITHSUNDEEP
javascriptangularjsfirebaseangularfire
Lizajean
Lizajean

Reputation: 117

angularFire unable to $add data to firebase

I am using angularFire and trying to save data from a form to firebase with $add. Any help would be greatly appreciated. The console logs all work, I am able to retrieve the data in the console. Sorry for all of the code... I wanted to be sure I provided all the material needed.

app.js:

    var creativeBillingApp = angular.module('creativeBillingApp', ['ngRoute', 'firebase']);

    creativeBillingApp.constant('FIREBASE_URI', "https://XXXX.firebaseIO.com/");

    creativeBillingApp.controller('MainCtrl', ['$scope', 'groupsService', function( $scope,  groupsService, $firebase ) {

    console.log('Works')


    $scope.newGroup = {
     name: '',
     status: ''

    };

   $scope.addGroup = function(newGroup){

   console.log(newGroup);

groupsService.addGroup();
  $scope.newGroup = {
    name: '',
    status: ''

  };
};
 $scope.updateGroup = function (id) {
   groupsService.updateGroup(id);
 };

 $scope.removeGroup = function(id) {
   groupsService.removeGroup(id);
 };
}]);




creativeBillingApp.factory('groupsService', ['$firebase', 'FIREBASE_URI',
  function ($firebase, FIREBASE_URI) {
    'use strict';
    var ref = new Firebase(FIREBASE_URI);
    return $firebase(ref).$asArray();

var groups = $firebase(ref).$asArray();

var getGroups = function(){
  return groups;
};

var addGroup = function (newGroup) {
  console.log(newGroup)
  groups.$add(newGroup);
};

var updateGroup = function (id){
  groups.$save(id);
};

var removeGroup = function (id) {
  groups.$remove(id);
};
return {
  getGroups: getGroups,
  addGroup: addGroup,
  updateGroup: updateGroup,
  removeGroup: removeGroup,
}

}]);

index.html:

         <form role="form" ng-submit="addGroup(newGroup)">
            <div class="form-group">
              <label for="groupName">Group Name</label>
              <input type="text" class="form-control" id="groupName" ng-model="newGroup.name">
            </div>
            <div class="form-group">
              <label for="groupStatus">Group Status</label>
              <select class="form-control" ng-model="newGroup.status">
                <option value="inactive">Inactive</option>
                <option value="active">Active</option>
              </select>
            </div>
           <button type="submit" class="btn btn-default">Submit</button>
          </form>

This is the error I am getting: 

TypeError: undefined is not a function
at Scope.$scope.addGroup (http://localhost:9000/scripts/app.js:35:19)

and the app.js line 35 is in reference to groupsService.addGroup(); from the app.js code given above.

Upvotes: 0

Views: 507

Answers (1)

David East
David East

Reputation: 32624

Firstly, you are returning in your service after you create your $FirebaseArray. You are also creating another $FirebaseArray after that.

return $firebase(ref).$asArray();

Remove that return statement. That is causing your service to return early and none of the attached methods will apply to your service.

In groupService.addGroup() you are calling push, which is not a function on $asArray. You need to call .$add(). The newGroup argument is also not being passed in the controller.

The $.push method is available on the base of the $firebase binding. When you using a $FirebaseArray the $add method pushes a new record into Firebase.

See the docs for more info.

Plunker Demo

var addGroup = function (newGroup) {
  console.log(newGroup)
  groups.$add(newGroup);
};

Then in your controller you can simply call:

$scope.addGroup = function(newGroup){
  groupsService.addGroup(newGroup);

  $scope.newGroup = {
    name: '',
    status: ''
  };
};

Upvotes: 5

Related Questions