AngularFire $remove item from Array using a variable in Firebase reference does not work

Question

I've been struggling with the following problem:

I'm trying to delete a 'Post' item from a Firebase Array with the $remove AngularFire method which I have implemented in a Angular Service (Factory). This Post is a child of 'Event', so in order to delete it I have to pass this Service a argument with the relevant Event of which I want to delete the post.

This is my controller:

app.controller('EventSignupController', function ($scope, $routeParams, EventService, AuthService) {
  // Load the selected event with firebase through the eventservice
  $scope.selectedEvent = EventService.events.get($routeParams.eventId);

  // get user settings
  $scope.user =  AuthService.user;
  $scope.signedIn = AuthService.signedIn;

  // Message functionality
  $scope.posts = EventService.posts.all($scope.selectedEvent.$id);

  $scope.post = {
    message: ''
  };
  $scope.addPost = function (){
    $scope.post.creator = $scope.user.profile.username;
    $scope.post.creatorUID = $scope.user.uid;
    EventService.posts.createPost($scope.selectedEvent.$id, $scope.post);
  };

  $scope.deletePost = function(post){
    EventService.posts.deletePost($scope.selectedEvent.$id, post);
    // workaround for eventService bug:
    // $scope.posts.$remove(post);
  };
});

And this is my Service (Factory):

app.factory('EventService', function ($firebase, FIREBASE_URL) {
  var ref = new Firebase(FIREBASE_URL);
  var events = $firebase(ref.child('events')).$asArray();

  var EventService = {
    events: {
      all: events,
      create: function (event) {
        return events.$add(event);
      },
      get: function (eventId) {
        return $firebase(ref.child('events').child(eventId)).$asObject();
      },
      delete: function (event) {
        return events.$remove(event);
      }
    },
    posts: {
      all: function(eventId){
        var posts = $firebase(ref.child('events').child(eventId).child('posts')).$asArray();
        return posts;
      },
      createPost: function (eventId, post) {
        // this does work
        var posts = $firebase(ref.child('events').child(eventId).child('posts')).$asArray();
        return posts.$add(post);
      },
      deletePost: function (eventId, post) {
        // this does not work
        var posts = $firebase(ref.child('events').child(eventId).child('posts')).$asArray();
        return posts.$remove(post);
      }
    }
  };

  return EventService;
});

When I try to delete the link tag just freezes and no error logging appears in the console. While if I call $remove on my $scope.posts directly in my controller it magically works.. Furthermore my Post is not removed from my Firebase DB.

Another weird thing is that 'CreatePost' works perfectly fine using the same construction.

My view:

 <div class="col-xs-8 col-xs-offset-2 well">
        <form ng-submit="addPost()" ng-show="signedIn()">
          <input type="text" ng-model="post.message" />
          <button type="submit" class="btn btn-primary btn-sm">Add Post</button>
        </form>
        <br>
        <div class="post row" ng-repeat="post in posts">
          <div>
            <div class="info">
                {{ post.message }}
            </div>
            <div>
              <span>submitted by {{ post.creator }}</span>
              <a href="" ng-click="deletePost(post)" ng-show="user.uid === post.creatorUID">delete</a>
            </div>
            <br>
          </div>
        </div>
      </div>

P.s. I'm not too sure that my 'Service' is implemented in the best possible way.. I couldn't find another solution for doing multiple firebase calls

var posts = $firebase(ref.child('events').child(eventId).child('posts')).$asArray();

within the Post part of my EventService, because it depends on eventId in each CRUD operation. Any ideas would be very welcome :)

delete: function (event) won't work in IE8 => delete is a reserved keyword. For your issue, is the post removed from the DB? — Deblaton Jean-Philippe
– Deblaton Jean-Philippe, Commented Feb 20, 2015 at 8:57
the delete in my events object works fine though.. It's the function inside the posts object that's causing trouble. The post is not removed from my Firebase DB btw.. I will add that to the issue. Thanks — sebas1987
– sebas1987, Commented Feb 20, 2015 at 11:33

Bojan Wilytsch · Accepted Answer · 2015-04-22 05:15:37Z

5

The easiest way for me was to use this:

var ref= new Firebase('https://Yourapp.firebaseio.com/YourObjectName');
ref.child(postId).remove(function(error){
    if (error) {
    console.log("Error:", error);
  } else {
    console.log("Removed successfully!");
  }
});

answered Apr 22, 2015 at 5:15

Bojan Wilytsch

511 silver badge2 bronze badges

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

Comments

Ghayyour Ahmed Butt · Accepted Answer · 2015-03-10 19:03:59Z

0

The only way I'm able to remove the item is using a loop on the array we get from firebase.

var ref= new Firebase('https://Yourapp.firebaseio.com/YourObjectName');
var arr_ref=$firebaseArray(ref);
    for(var i=0;i<arr_ref.length;i++){
        if(key==arr_ref[i].$id){
            console.log(arr_ref[i]);
            arr_ref.$remove(i);
        }
    }

answered Mar 10, 2015 at 19:03

Ghayyour Ahmed Butt

3931 gold badge2 silver badges13 bronze badges

Collectives™ on Stack Overflow

AngularFire $remove item from Array using a variable in Firebase reference does not work

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related