Problems with promise retrieving data AngularFire

Question

Looping through an array in my controller using angularjs and angularfire:

angular.forEach($scope.precourse, function(value, key){
   console.log(value);
});

Results in:

Object {$id: "-JUxrRDDip9wCwEx1t6j", $bind: function, $add: function, $save: function, $set: function…}

Object {$id: "-JUxrRDHo6Ph5_5_yUNF", $bind: function, $add: function, $save: function, $set: function…}

Object {$id: "-JUxrRDIGdTuhZkQQ73a", $bind: function, $add: function, $save: function, $set: function…}

Open one object I can see the different properties:

Object {$id: "-JUxrRDIGdTuhZkQQ73a", $bind: function, $add: function, $save: function, 
$set: function…}
$$hashKey: "00P"
$add: function (item) {
$auth: function (token) {
$bind: function (scope, name, defaultFn) {
$child: function (key) {
$getIndex: function () {
$getRef: function () {
$id: "-JUxrRDIGdTuhZkQQ73a"
$off: function (type, callback) {
$on: function (type, callback) {
$remove: function (key) {
$save: function (key) {
$set: function (newValue) {
$transaction: function (updateFn, applyLocally) {
$update: function (newValue) {
pairs: Object         //The Objects I'm intrested in
responsible: Object   //The Objects I'm intrested in
__proto__: Object

so let's print them out!

console.log(value.pairs);
console.log(value.responsible);

Result

undefined schedule.js:38
-JUrw5QLvIaBaICuKdmC schedule.js:39
undefined schedule.js:38
-JUsWS58wX4Y_zEf7FqG schedule.js:39
undefined schedule.js:38
-JU_6xy9_JDkgrE1mPSb

And if I use the $child() property

console.log(value.$child('pairs'));
console.log(value.$child('responsible'));

Object {$id: "pairs", $bind: function, $add: function, $save: function, $set: function…}
Object {$id: "responsible", $bind: function, $add: function, $save: function, $set: function…}
Object {$id: "pairs", $bind: function, $add: function, $save: function, $set: function…}
Object {$id: "responsible", $bind: function, $add: function, $save: function, $set: function…}
Object {$id: "pairs", $bind: function, $add: function, $save: function, $set: function…}
Object {$id: "responsible", $bind: function, $add: function, $save: function, $set: function…}

Why is this? I'm just looking for the actual values of the object, how do I get them? I want to use value.pairs to retrieve pairs but that won't work.

EDIT: Added $on('loaded', function())

Code now looks:

angular.forEach($scope.precourses, function(value, key){
            value.$on('loaded', function(loadedValue) {
                console.log(loadedValue);
                console.log(loadedValue.pair);
            });
        });

Gives output:

Object {responsible: "-JU_6xy9_JDkgrE1mPSb"} schedule.js:40
undefined schedule.js:41
Object {responsible: "-JUrw5QLvIaBaICuKdmC"} schedule.js:40
undefined schedule.js:41
Object {responsible: "-JUsYm9UtONz0NzNTqbT"} schedule.js:40
undefined schedule.js:41

Press button to repeat forEach-loop again:

(after short delay)
Object {pairs: Object, responsible: "-JU_6xy9_JDkgrE1mPSb"} schedule.js:40
Object {-JUYhpPWOXqSpDNph5lo: "-JUYhpPWOXqSpDNph5lo", -JU_6xy9_JDkgrE1mPSb: "-JU_6xy9_JDkgrE1mPSb", -JUrw5QLvIaBaICuKdmC: "-JUrw5QLvIaBaICuKdmC"} schedule.js:41
Object {pairs: Object, responsible: "-JUsWS58wX4Y_zEf7FqG"} schedule.js:40
Object {-JUsWEf-v5XxIcLJSFgz: "-JUsWEf-v5XxIcLJSFgz", -JUsWS58wX4Y_zEf7FqG: "-JUsWS58wX4Y_zEf7FqG", -JUsYm9UtONz0NzNTqbT: "-JUsYm9UtONz0NzNTqbT"} schedule.js:41
Object {pairs: Object, responsible: "-JUrvf-rxHZPc4kF-IBb"} schedule.js:40
Object {-JUZSc-QEO0U0rf7hLV4: "-JUZSc-QEO0U0rf7hLV4", -JUdf8Z-uxlc0_sg-ZzB: "-JUdf8Z-uxlc0_sg-ZzB", -JUrvf-rxHZPc4kF-IBb: "-JUrvf-rxHZPc4kF-IBb"} schedule.js:41

EDIT #2 Ok I think I found the problem. It's in the service file where the schedule is created:

Inside /service/schedule.js

angular.forEach(preCourse, function (value, key){
        scheds.$child(schedId).$child('courses').$child('precourses').$add({
          responsible: value
        }).then(function (ref) {
          console.log('Inside Precourse');
scheds.$child(schedId).$child('courses').$child('precourses').$child(ref.name()).$child('pairs').$child(mainCourse[key]).$set(mainCourse[key]);
              scheds.$child(schedId).$child('courses').$child('precourses').$child(ref.name()).$child('pairs').$child(afterCourse[key]).$set(afterCourse[key]);
        });
      });

In my Controller I now create a schedule and log result of precourse:

$scope.schedule = Schedule.scheduleEvent($scope.eve);
$scope.schedule.$on('loaded', function() {
            $scope.precourses = $scope.schedule.courses.precourses;
            console.log($scope.precourses);     
                });

Which results in:

Object {-JUyS4KEV3ljmNvmb8kL: Object, -JUyS4KHH9dM5qwhr_uX: Object, JUyS4KJOjjh5DGu3LSk: Object}
-JUyS4KEV3ljmNvmb8kL: Object
    responsible: "-JUsWS58wX4Y_zEf7FqG"
    __proto__: Object
-JUyS4KHH9dM5qwhr_uX: Object
-JUyS4KJOjjh5DGu3LSk: Object
__proto__: Object

Inside Precourse

Any idea of what's wrong with my promises? Possible conflict between .then (service) and $on('loaded') (controller)

$on has been removed in AngularFire 0.8. I'd recommend upgrading and using the new $asObject and $asArray functions. Calling $asObject will return a $FirebaseObject and you can iterate through it's properties. — David East
– David East, Commented Aug 22, 2014 at 16:29

rob · Accepted Answer · 2014-08-22 13:54:27Z

2

You're probably logging console.log(value.pairs); before the data loads from firebase. If you upgrade to v0.8 then you can use $loaded() to wait for the data to load. With the version you are currently using you can use $on("loaded")

e.g.

value.$on("loaded", function(loadedValue) {
    console.log(loadedValue.pairs);
}

answered Aug 22, 2014 at 13:54

rob

18.7k13 gold badges73 silver badges95 bronze badges

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

6 Comments

user3789629 Over a year ago

that is a splendid answer, Thanks! To get this to work 100% correct though, I need to repeat the forEach-loop at least twice (by button press) to get anything other than 'undefined' in my console. Guess the loading problem is the error here as well. Is there anyway to just pause everything to make sure that everything is loaded properly? such as 'TimeOut(500)'

rob Over a year ago

are you using $on and still getting undefined? if so are you logging out value instead of loadedValue? Even when the loaded function gets called value will still not be initialized so you have to use the parameter that gets passed into the function

user3789629 Over a year ago

updated the question (below Edit) with my new code. Looks super after second iteration.

rob Over a year ago

hmmm. I don't know why it's not loaded on the first run. Maybe try value.$child('pairs').$on('loaded', ...)

user3789629 Over a year ago

Same result I'm afraid. It can't be that I have to use $on.('loaded') on $scope.precourse in some way?

|

Collectives™ on Stack Overflow

Problems with promise retrieving data AngularFire

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related