I am having trouble accessing the data loaded from firebase using the .$on method in AngularFire 0.5.0
In the callback when I log out the contents of the scope the data is there but when I try to use deeper data I get undefined
. Perhaps I am misunderstanding how you are meant to access data in this method?
This is my controller:
.controller('AssetDetailCtrl',
['$scope', '$firebase', 'FBURL',
function($scope, $firebase, FBURL) {
var refAsset = new Firebase(FBURL + '/assets/' + $scope.assetId);
$scope.asset = $firebase(refAsset);
// when data is loaded check validity of the route
$scope.asset.$on('loaded', function() {
console.log($scope.asset); // complete with the asset data
console.log($scope.asset.name); // undefined even though it appears in the above console log
});
}])
So perhaps there is a better way to do this.
Why is it I cannot access the data from the scope the even though it logs to the console?
This is the result of the first console.log
Object { $bind: function, $add: function, $save: function, $set: function, $remove: function…}
$add: function (b,c){var d;return d="object"==typeof b?a._fRef.ref().push(a._parseObject(b),c):a._fRef.ref().push(b,c)}
$bind: function (b,c){return a._bind(b,c)}
$child: function (b){var c=new AngularFire(a._q,a._parse,a._timeout,a._fRef.ref().child(b));return c.construct()}
$getIndex: function (){return angular.copy(a._index)}
$on: function (b,c){switch(b){case"change":a._onChange.push(c);break;case"loaded":a._onLoaded.push(c);break;default:throw new Error("Invalid event type "+b+" specified")}}
$remove: function (b){b?a._fRef.ref().child(b).remove():a._fRef.ref().remove()}
$save: function (b){b?a._fRef.ref().child(b).set(a._parseObject(a._object[b])):a._fRef.ref().set(a._parseObject(a._object))}
$set: function (b){a._fRef.ref().set(b)}
asset_author: Object
collections: Array[2]
creator: "John Doe"
desc: "a description of the asset"
file: "http://lorempixel.com/400/200/sports/3/"
filesize: "28kb"
filetype: "jpg"
name: "Cycling"
release: "12/12/2013"
tags: "tag1, tag3"
type: "Photography"
__proto__: Object
Second console.log returns undefined
Based on Kato's answer here I have been able to solve this.
I was unaware the loaded event passed the raw data of the loaded asset, it is undocumented in the AngularFire docs.
It doesn't explain the odd behaviour I was having with console.log but it does solve the problem.
.controller('AssetDetailCtrl',
['$scope', '$firebase', 'FBURL',
function($scope, $firebase, FBURL) {
var refAsset = new Firebase(FBURL + '/assets/' + $scope.assetId);
$scope.asset = $firebase(refAsset);
// when data is loaded check validity of the route
$scope.asset.$on('loaded', function(value) {
console.log(value); // data loaded from Firebase
console.log(value.name); // subset of the returned value
});
}])
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With