Firebase delete and retrieve data with Angularjs

Question

I am new to firebase, and wondering how I can implement deleting the data in Angular view (interface), but still keep it in the Firebase database. Currently, due to the three way binding (use Firebase.remove() function), the data will be deleted in the database when it is deleted in Angular view. See in Plunker here: http://plnkr.co/edit/BBtD2YoUBHBAyhu0puXd?p=info

Here is the remove user part:

// Remove user
$scope.removeRecord = function(userId) {
    var userUrl = fbURL + user_table + '/' + userId;
    $scope.user = $firebase(new Firebase(userUrl));
    $scope.user.$remove()
    $scope.alerts.splice(0, 1);
    $scope.alerts.push({
        type: 'success',
        msg: "User removed successfully!"
    });
};

Or is that possible I can retrieve a data from Firebase based on my custom query? So maybe I can distinguish the deleted data from the existing data in Firebase database?

because i want to have all the data in database even it is get deleted, so i can analyze the user behavior afterwards.... — Lisa
– Lisa, Commented Jul 15, 2015 at 21:47
You could create a copy of the data and not bind it to firebase and then operate on that? — Chrillewoodz
– Chrillewoodz, Commented Jul 15, 2015 at 21:53

Frank van Puffelen · Accepted Answer · 2015-08-05 01:30:17Z

2

because i want to have all the data in database even it is get deleted

This is typically referred to as a "soft delete" and it essentially means you simply mark the data as "deleted.

Say you have this data:

messages
    -J4378sdfisdf
        name: "Lisa"
        message: "I am new to firebase, and wondering..."
    -J4378sdfjteg
        name: "Chrillewoodz"
        message: "Try doing this instead..."
    -J4378sdfkufh
        name: "Frank van Puffelen"
        message: "This is typically referred to as a..."

Instead of only removing the messages from view, you instead mark them as "deleted"/hidden. In the sample below, I added a visible field for the purpose:

messages
    -J4378sdfisdf
        name: "Lisa"
        message: "I am new to firebase, and wondering..."
        visible: true
    -J4378sdfjteg
        name: "Chrillewoodz"
        message: "Try doing this instead..."
        visible: true
    -J4378sdfkufh
        name: "Frank van Puffelen"
        message: "This is typically referred to as a..."
        visible: false

And then you can use a Firebase query to get only the messages that have not been hidden:

var ref = new Firebase('https://yours.firebaseio.com');
var query = ref.child('messages').orderByChild('visible').equalTo(true);
$scope.messages = $firebaseArray(query);

edited Aug 5, 2015 at 1:30

answered Jul 16, 2015 at 3:25

Frank van Puffelen

603k85 gold badges896 silver badges869 bronze badges

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

7 Comments

Lisa Over a year ago

oops! for some reason, I did not see your answer here until today. Thank you very much, this is exactly what I want to do. I used slightly different function though.

Lisa Over a year ago

Just figured out another way to it. I could just simply use filter in angular to filter all the data I got. ng-repeat="note in notes | filter: { visible: true }"

Frank van Puffelen Over a year ago

Yup. But keep in mind that is a client-side filter. So you first download all deleted data to each client, to then not display it. Depending on the amount of the deleted data, this can be considered wasteful or (depending on the number of users on mobile devices you have) inconsiderate of your users mobile data plan.

Lisa Over a year ago

Make sense...currently i am using $firebasearray to get the data, and could not figure out how to use orderBy to filter the data. Do you have any suggestions? thanks!

Frank van Puffelen Over a year ago

Uhm... doesn't my last sample above do exactly that: using orderBy() and equalTo() to filter what's in a $firebaseArray()?

|

Chrillewoodz · Accepted Answer · 2015-07-15 22:08:06Z

0

Try doing this instead:

<button ng-click="removeRecord(user)">Delete</button>

$scope.removeRecord = function(user) {

  user.remove();

  $scope.alerts.splice(0, 1);
  $scope.alerts.push({
    type: 'success',
    msg: "User removed successfully!"
  });
};

This way you're not accessing the user in Firebase, but in the view instead.

You should pass the user object into the function instead of its ID. The way you were doing it you were accessing the user in Firebase rather in the view only.

answered Jul 15, 2015 at 22:08

Chrillewoodz

28.5k23 gold badges102 silver badges189 bronze badges

4 Comments

Lisa Over a year ago

thanks! but this would not work once i refresh the page. The data is still in the firebase, then will be displayed in the view again...so i am wondering if i can do a custom query from firebase...does it make sense?

Chrillewoodz Over a year ago

It doesn't make any sense. You said you wanted to keep the records in firebase but only delete them in the view. Of course they're gonna comeback when you refresh, so I don't quite follow what you're trying to do here.

Lisa Over a year ago

-_-||....1. yes, i wanna keep the records in firebase. 2. i don't want the deleted data come back to other users. so i suppose i could use a field to mark if a data is deleted or not, then make a custom query....but since i have not done this before, so i am wondering if it is the right way to do it.... still not make sense?

Chrillewoodz Over a year ago

@Lisa Then I have no idea how you're going to achieve that, sorry :s

Collectives™ on Stack Overflow

Firebase delete and retrieve data with Angularjs

2 Answers 2

7 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related