CODEWITHSUNDEEP
firebaseangularfire
minervadreaming
minervadreaming

Reputation: 35

"TypeError: undefined is not a function" when trying to push() to Firebase

Upon submission of a form, I want to push that data to my Firebase db and so I'm creating a function to do so (addMeeting). However, upon pressing the button to submit I get the error:

TypeError: undefined is not a function
at l.$scope.addMeeting (http://localhost:8000/js/controllers/meetings.js:10:12)

meetings.js:10:12 is right where my $push is if you'll look at my code below.

My HTML:

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>Angular Data</title>
  <meta name="viewport" content="width=device-width, userscalable=no">
  <link rel="stylesheet" href="css/style.css">

<!-- AngularJS -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="js/lib/angular/angular-route.min.js"></script>
  <script src="js/lib/angular/angular-animate.min.js"></script>

<!-- Firebase -->
  <script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>

<!-- AngularFire -->
  <script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>

  <script src="js/app.js"></script>
  <script src="js/controllers/registration.js"></script>
  <script src="js/controllers/meetings.js"></script>

</head>
<body>
<header>
    <nav class="cf" ng-include="'views/nav.html'"></nav>
</header>
<div class="page">
  <main class="cf" ng-view></main>
</div>
</body>
</html>

My apps.js:

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

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

myApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/login', {
            controller: 'RegistrationController',
            templateUrl: 'views/login.html'
        }).
        when('/register', {
            controller: 'RegistrationController',
            templateUrl: 'views/register.html'
        }).
        when('/meetings', {
            controller: 'MeetingsController',
            templateUrl: 'views/meetings.html'
        }).
        otherwise({
            redirectTo: '/login'
        });

}])

meetings.js -the Controller containing the addMeeting function that is failing:

myApp.controller('MeetingsController', 
    function($scope, $firebaseObject) {

    var ref = new Firebase('https://angulardataldc.firebaseio.com/meetings');
    var meetings = $firebaseObject(ref);

    $scope.meetings = meetings;

    $scope.addMeeting = function() {
        meetings.$push({
            name: $scope.meetingname,
            date: Firebase.ServerValue.TIMESTAMP
        })
    }

}); //MeetingsController

The view that is calling that function upon submission of a form:

<section class="meetings cf">

    <h1>Add Meetings</h1>
    <form class="formgroup addmeeting cf"
        name="myform"
        ng-submit="addMeeting()"
        novalidate>

        <div class="inputwrapper">
            <input type="text" name="meetingname" placeholder="Meeting Name"
                ng-model="meetingname" ng-required="true">
        </div>
        <button type="submit" class="btn"
            ng-disabled="myform.$invalid">+</button>
    </form>

    <h2>Your Meetings</h2>
    <div class="meeting" ng-repeat="meeting in meetings">
        <p>{{meeting.name}}</p>
    </div>
</section>

**Edit: ** It has something to do with the .push() method itself. I see that in the latest version of angularfire/firebase it should be .push, instead of .$push, ad have changed that but it does not solve my problem. I reverted AngularFire and Firebase to versions 0.8.2 and 1.0.21 respectively, re-introduced the .asObject() and $push, and everything works fine. I don't understand why .push() is failing with all the latest (Firebase 2.2.2, AngularFire 1.0).

Upvotes: 1

Views: 1745

Answers (2)

Frank van Puffelen
Frank van Puffelen

Reputation: 598837

Firebase's AngularFire library has two primary types: $firebaseObject and $firebaseArray (instantiated through $asObject and $asArray respectively in pre-1.0 versions of AngularFire).

You're using both the wrong type and the wrong method. To quote AngularFire's documentation on its array type:

Synchronized arrays should be used for any list of objects that will be sorted, iterated, and which have unique IDs. The synchronized array assumes that items are added using $add(), and that they will therefore be keyed using Firebase push IDs.

So: 

    var ref = new Firebase('https://angulardataldc.firebaseio.com/meetings');
    var meetings = $firebaseArray(ref);

    $scope.meetings = meetings;

    $scope.addMeeting = function() {
        meetings.$add({
            name: $scope.meetingname,
            date: Firebase.ServerValue.TIMESTAMP
        })
    }

Upvotes: 2

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

You made a typo, it should be .push instead of $push

CODE

$scope.addMeeting = function() {
    meetings.push({
        name: $scope.meetingname,
        date: Firebase.ServerValue.TIMESTAMP
    })
}

Reference

Upvotes: 0

Related Questions