Cannot get data from firebase in directive angularjs

Question

I'm doing a slider following the steps from this tutorial using Angular.js and Firebase API.

I have created a directive 'slider' in my directive file, here is the code:

.directive('slider', function()
{
    return {
        restrict: 'E',
        replace: true,
        link: function(scope, elem, attrs) {
            scope.currentIndex = 0; // Initially the index is at the first slide

            scope.next = function()
            {
                scope.currentIndex < scope.challenges.length - 1 ? scope.currentIndex++ : scope.currentIndex = 0;
            };

            scope.prev = function()
            {
                scope.currentIndex > 0 ? scope.currentIndex-- : scope.currentIndex = scope.challenges.length - 1;
            };

            scope.$watch('currentIndex', function()
            {
                scope.challenges.forEach(function(challenge)
                {
                    challenge.visible = false; // make every challenge invisible
                });

                scope.challenges[scope.currentIndex].visible = true; // make the current challenge visible
            });
        },
        template: '<div></div>'
    };

I have no isolate scope, as you see, so it should take scope.challenges from parent, but it comes as undefined value instead of the data from Firebase.

So doing forEach of undefined it throws an error: TypeError: Cannot read property 'forEach' of undefined

I spent like 3 hour trying to understand scopes, a solution will be so rewarding. Thank you very much.

Can you share the code where challenges is created? You've mentioned firebase so I imagine there are some async ops taking place? — Kato
– Kato, Commented Sep 24, 2014 at 20:45
Alternative angular.forEach(scope.challenges, function(challenge) { challenge.visible = false }); — DeadCalimero
– DeadCalimero, Commented Sep 24, 2014 at 21:03
@Kato in controller I have $scope.findAll = function() { $scope.challenges = Challenge.findAll(); }; it just take all the result from Firebase. — Alejandro Garcia Anglada
– Alejandro Garcia Anglada, Commented Sep 24, 2014 at 21:12
@DeadCalimero I have it tried and doesn't work because scope.challenges is still undefined, I have also tried to $watch challenges to check if is it is something asynchronous. — Alejandro Garcia Anglada
– Alejandro Garcia Anglada, Commented Sep 24, 2014 at 21:14
@aganglada is certainly a promise, Challenge.findAll() request an url with $http. Do you resolved the promise before iterate ? — DeadCalimero
– DeadCalimero, Commented Sep 24, 2014 at 21:16

Alejandro Garcia Anglada · Accepted Answer · 2014-09-25 13:55:24Z

1

@rizome thank you very much for your answer, it was really useful.

Firebase API returns directly a promise, so you don't have to do so.

Finally I resolve it, updating 'angularfire' to v0.8 and this code:

// Controller code
Challenge.findAll().$asArray().$loaded().then(function(challenges)
{
    $scope.challenges = challenges;
});

Basically what it does is wait till challenges are ready to assign.

This article from firebase was really a good resource to solve it.

answered Sep 25, 2014 at 13:55

Alejandro Garcia Anglada

2,4031 gold badge29 silver badges41 bronze badges

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

1 Comment

Kato Over a year ago

AngularFire is currently on 0.8.2. There are some bug fixes between 0.8 and the latest.

Community · Accepted Answer · 2017-05-23 11:57:41Z

I don't know if I missunderstood, but:

var currentIndexChangeHandler = function(newValue, oldValue) {
    scope.challenges.forEach(function(challenge) {
        //do something
    }
}
scope.$watch('currentIndex', currentIndexChangeHandler);

will provoke that "currentIndexChangeHandler" will be triggered on the very first run (see: $watch is triggered directly after init, why?), when "scope.challenges" is still undefined.

You colud "hack" this "first run" with "if(newValue!=oldValue)", but I think this is not the point. Other problem is that when you iterate "scope.challenges", it is undefined, because its value should be async received. It could be solved using "if(Boolean(scope.challenges))", but it's not the right way.

I think the real problem is that you are working with async data.

¿What value returns Challenge.findAll()? ¿maybe a promise? In this way you should use:

Challenge.findAll().then(function(challenges){
    $scope.challenges = challenges;
}

I refactored your code with my sugestion. Is that behaviour, what you was pretending?

http://jsfiddle.net/rizome/uqtaoLne/

UPDATE:

Using Firebase and $firebase (see: https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-firebase)

"$firebase" AngularJS wraper has a similar behaviour than coded in the fiddle above, but you should use "$firebase" api to obtain a promises. (this piece of code represents code inside your repo-service, and inside the controller as well)

var firebaseResource = $firebase(new Firebase(YOUR_DATA_URL));
var firebaseSyncArray = firebaseResource.$asArray(); //it is still empty
var loadedArrayPromise = firebaseSyncArray.$loaded(); //promise with the array when loaded
var loadedArrayPromise.then(function (challenges) {
        $scope.challenges = challenges; //now, you can set $scope.challenges
});

Collectives™ on Stack Overflow

Cannot get data from firebase in directive angularjs

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related