AngularFire TypeError: Object #<Object> has no method 'push'

Question

I'm trying to add a new object to my firebase model. Below is my Angularfire setup:

angular.module('angularApp', ['firebase'])
  .controller('MyCtrl', ['$scope', 'angularFire',
    function MyCtrl($scope, angularFire) {
      $scope.shapes = [];
      var ref = new Firebase('https://angular-starter.firebaseio.com/shapes');
      angularFire(ref, $scope, 'shapes');


      $scope.addShape = function () {
        console.log(typeof $scope.shapes);

        var newShape = {color: "#536993", height: 0, id: 1, left: 0, position: "absolute"};
         $scope.shapes.push(newShape);

      };
    }
  ])

I understand that object don't have a push method but I'm having trouble figuring out how to define the model as array object. I thought $scope.shapes = []; should do the job?

Looks like firebase must be replacing the array with an object. Your array def is fine from what I can tell. — shaunhusain
– shaunhusain, Commented Dec 9, 2013 at 9:06

Kato · Accepted Answer · 2013-12-16 15:25:32Z

1

When you bind Firebase to a scope variable, using angularFire, you can't arbitrarily pick a data type. angularFire always works with models (objects), and stores the data as an object.

If your remote data has entirely numeric, and sequential keys, you can simulate array like behavior (although Firebase always stores data as objects, even in this case) by using angularFireCollection, which utilizes arrays for storing values.

Note that even in the case of angularFireCollection, you may not call push(), but instead need to use the built-in add() method.

Also note that angularFire 0.5 is imminent (next week perhaps) and will refine a lot of these confusions.

UPDATE

AngularFire 0.5 was released, so the appropriate method is now $add instead of add and there is no longer a distinction between angularFire and angularFireCollection.

edited Dec 16, 2013 at 15:25

answered Dec 9, 2013 at 14:07

Kato

40.6k6 gold badges124 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Poyi Over a year ago

I see, I'll look into angularFireCollection in the meantime and keep an eye out for angularFire update.

Mainul · Accepted Answer · 2013-12-09 09:37:20Z

0

Looks like Firebase reset the $scope.shapes to an object. You can use object method like

$scope.shapes[index] = newShape;

to store the data rather than use push method.

answered Dec 9, 2013 at 9:37

Mainul

8897 silver badges10 bronze badges

Collectives™ on Stack Overflow

AngularFire TypeError: Object #<Object> has no method 'push'

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related