How to use angular forEach with firebase

Question

I'm new to angular. I'm attempting to use angular foreach with firebase, but it didn't work. Any pointers on how to do this?

var app = angular.module('MyApp',["firebase"]);
    app.controller('ItemCtrl', function($scope, $firebase){
      var ref = new Firebase("https://url.firebaseio.com");
        $scope.menu = $firebase(ref);

        $scope.total = function(){
            var total = 0;

            angular.forEach($scope.menu, function(item) {

              total += item.price * item.quantity;

          })

          return total;

          };

    });

html

<div class=" sliding" >
  <a href="#"class="button open" >
     Total: {{total() | currency}}
  </a>
</div>

json

[
         {"name": "Ham, Egg & Cheese CROISSAN'WICH ",
          "quantity": 0,
          "price": 20, 
          "description": "description", 
          "comment": "comment",
          "imgURL": "http://url"    },
...]

Are you sure that angular fire and Firebase are being included properly? — Explosion Pills
– Explosion Pills, Commented Jul 12, 2014 at 5:29
yeah, pretty sure. I can get the data from firebase,$scope.menu worked correctly. — user3831592
– user3831592, Commented Jul 12, 2014 at 5:38
Error: [$interpolate:interr] Can't interpolate: Total: {{total() | currency}} ReferenceError: total is not defined — user3831592
– user3831592, Commented Jul 12, 2014 at 5:42

David East · Accepted Answer · 2014-07-12 17:47:27Z

1

Rather than trying to enumerate over AngularFire we can listen to any changes in Firebase that make up our total. So every time an item is changed we can update the total value automatically.

On the $scope.menu, attach an $on listener for the change event. Then we can provide a callback function that calculates the total to a property on $scope. Then in our view we won't have to call a function we can just bind the total property on $scope.

Plunker Demo

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

  app.constant('FBURL', 'https://<your-firebase>.firebaseio.com/items');
  app.service('Ref', ['FBURL', Firebase]);

  app.controller('ItemCtrl', function($scope, $firebase, Ref) {

    $scope.menu = $firebase(Ref);
    $scope.total = 0;

    // Listen for any changes in firebase
    //
    // The $on listener will take a event type, "change" 
    // and a callback function that will fire off for each
    // item that has been changed. On the initial page load
    // it will return each item at the location one at a time
    //
    // Remember that AngularFire automatically updates any changes 
    // for us, so we just need to get the key back from the callback
    $scope.menu.$on('change', function(key) {
      // the key is the object's key in Firebase
      var item = $scope.menu[key];
      $scope.total += item.price * item.quantity;
    });

  });

The View

<div class="sliding">
  <a href="#" class="button open">
    Total: {{ total }}
  </a>
</div>

edited Jul 12, 2014 at 17:47

answered Jul 12, 2014 at 17:40

David East

32.7k6 gold badges70 silver badges83 bronze badges

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

2 Comments

user3831592 Over a year ago

ugh....and what should i do, if i want to modify the data in firebase, like increase quantity.

David East Over a year ago

That's easy too! Ask another question, it'll be a lot easier for me to answer there rather in the comments.

Collectives™ on Stack Overflow

How to use angular forEach with firebase

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related