AngularFire: Return $value

Question

I'm trying to log my service.title to the console, but it keeps passing it back as a weird object.

.factory('service', function($firebase, FBURL, $routeParams) {
  var ref = new Firebase(FBURL + "services/" + $routeParams.serviceId);
  var title = $firebase(ref.child('title')).$asObject();

  return {
    id: $routeParams.serviceId,
    title: title
  }
})

.controller('ServiceController', function ($scope, $firebase, service, $routeParams, FBURL) {
  $scope.service = service;

  console.log($scope.service.title);
})

Here's what I get back from the console:

enter image description here I'm trying to retrieve that $value in the console log. Can anyone help explain what I might be doing wrong?

Thanks in advance!

Frank van Puffelen Frank van Puffelen · Accepted Answer · 2015-01-23T12:10:58

What you're calling "a weird object" is simply an AngularFire object. Which is pretty much expected, given that you assign it like this:

var title = $firebase(ref.child('title')).$asObject();

When you call $asObject on a simple value, AngularFire keeps the real value in a $value property.

But of course the value is retrieved from the Firebase servers asynchronously, so is not immediately available after you've set up the ref and the called $asObject. So this will not work:

var ref = new Firebase(FBURL + "services/" + $routeParams.serviceId);
var title = $firebase(ref.child('title')).$asObject();
console.log(title.$value);

Instead, you'll need to respond to when it becomes available, for which AngularFore has some nice promises:

var ref = new Firebase(FBURL + "services/" + $routeParams.serviceId);
var title = $firebase(ref.child('title')).$asObject();
title.$loaded().then(function(title) {
  console.log(title.$value);
});

You only need to handle this promise if you want to deal with the data in your own code. If you simply want to bind the title to an AngularJS view (which is what AngularFire was made for), the view will update automatically. Well... not really automatically, it listens for similar promises to resolve. But in that case you won't have to deal with it in your own code.

AngularFire: Return $value

2 Answers