CODEWITHSUNDEEP
angularjsgoogle-chromefirebaseruntime-error
rcpilotp51
rcpilotp51

Reputation: 524

Firebase and illegal invocation

Does any one know why i get an illegal invocation error with this code? I think it is because I am trying to inject a profile image into the object that im getting - in the line addedCard.image = userInfo.image; but I dont know how to fix it. And because its part of a firebase listener its a continuous loop of errors and they keep adding up. This is the code that I have:

My service:

service.cardAdded = function(cb){
        // if(target === "all"){
            if($rootScope.validID){
            prayersRef.orderByChild("group").equalTo($localStorage.seedUser.id).on('child_added', function(snapshot){
                var val = snapshot.val();

                cb.call(this, {
                    to: val.to,
                    from: val.from,
                    date: val.date,
                    assigned: val.assigned,
                    group: val.group,
                    passage: val.passage,
                    id: snapshot.key()
                });
            });
        }
};

My controller:

myService.cardAdded(function(addedCard){
        $scope.card.push(addedCard);
          ProfileService.retrieveName(addedCard.assigned,function(userInfo) {
            if (userInfo.image) {
              addedCard.image = userInfo.image;  //I think that this is causing the error
            };
          });
      });

this is the error:

TypeError: Illegal invocation
at isArrayLike (angular.js:266)
at forEach (angular.js:322)
at copy (angular.js:832)
at copy (angular.js:798)
at copy (angular.js:838)
at copy (angular.js:798)
at copy (angular.js:820)
at copy (angular.js:790)
at copy (angular.js:838)
at copy (angular.js:798)
(anonymous function) @ angular.js:11706
(anonymous     function) @ angular.js:8619
(anonymous function) @ angular.js:16417
completeOutstandingRequest @ angular.js:4940
(anonymous function) @ angular.js:5328

Any help would be appreciated. Thank you

Upvotes: 1

Views: 726

Answers (1)

Tim Grant
Tim Grant

Reputation: 3456

This guidance from the AngularJS might be useful:

Lower-level DOM manipulation from your JS code ... is no-no with AngularJS

and

If you stick to manipulating data model angular.copy will work just fine.

https://github.com/angular/angular.js/issues/8353

Your code is calling angular.copy implicitly (you can see that in your Chrome error) so make sure you are only copying you data model, not whole DOM elements.

Have you tried assigning only the elements that you need from the userInfo.image to addedCard.image, instead of copying the whole object, like this?

addCard.image = new Card(userInfo.image);

function AddCard(userImage) {
  var obj = {     
    // Assign the needed attributes
  };
  return obj; 
}

Upvotes: 1

Related Questions