Updating and Deleting Data in Firebase Realtime Database

Alright, so here's the continuation to my last two posts on using Firebase Realtime Database (here is a link to the last one for some reference). So far, we have successfully implemented saving and retrieving data with the use of Firebase Realtime Database in a little bug tracking app. Now, let's talk about how to update and delete the data!

Updating Data

A new issue ticket looks like this:

By default, the status of a new issue will be set to "Open". We have a "Closed" button to click in order to change the status accordingly. We will set a function to be triggered by a click event on that button in order to change the status to "Closed". Right now, we have the "Closed" button set like this:

<button onclick="setStatusClosed('${issue.id}')" id="closeButton" class="btn btn-warning mx-3">Close</button>

A click event on this button will call the setStatusClosed() function. We pass in the issue's ID number so that we can reference it when calling Firebase's update method. We then can specify which key-value to update, and in this case it will be the issue's status. It should like something like this:

function setStatusClosed(id) {
  issuesRef.child(`${id}`).update({
    "status": "Closed"
  })
  document.getElementById('issuesList').innerHTML = "";
  readIssues();
}

The last two lines of code above are simply to have the DOM display the current database after the specified information has been updated.

Deleting Data

We probably won't want to keep all of the issue tickets, or we will be stuck with a long list of both open and closed ones. The solution to this would be to enable our "Delete" button to get rid of it. The code for the "Delete" button is as follows:

<button onclick="deleteIssue('${issue.id}')" class="btn btn-danger mx-3">Delete</button>

The click event on this button will trigger our deleteIssue() function, where we again will pass in the issue ID number. To delete it, we will call Firebase's remove() method. We will again clear the current innerHTML of the issuesList in our DOM and call the readIssues() function in order to have the updated data displayed, so our code should look like this:

function deleteIssue(id) {
  issuesRef.child(`${id}`).remove();
  document.getElementById('issuesList').innerHTML = "";
  readIssues();
}

And that's it!

I'll be honest though, I'm not too sure about the way I'm currently updating the DOM. It just seems a little repetitive, and I'm sure there's a better way to go about it. If you have any suggestions, please feel free to comment below!

Helpful Links

https://firebase.google.com/docs/database/web/read-and-write#updating_or_deleting_data