DEV Community

loading...
Cover image for Realtime Database (edit& delete)- Todo List - Part 3 - Firebase Basics Series

Realtime Database (edit& delete)- Todo List - Part 3 - Firebase Basics Series

Areeb ur Rub
18 | coding since 2016 | Arduino | Python | JavaScript | HTML/CSS | Love learn making things
Updated on ・3 min read

Buy Me A Coffee

In the last post I have shown you how we can use Firebase's Realtime Db and implemented it also in our todo app but we were only able to add things into the toto list.

So today I will show you how you can delete things from todo list.

Deleting the task

To delete data is very simple just get the reference and delete it, for that I am adding onclick on the delete button which will call a delete function with taskID as parameter.

<button class="delete" onclick="delTask('${taskID}');">

Enter fullscreen mode Exit fullscreen mode

Now, in the delTask() function we will reference the task using task id and to remove it add .remove() like this,

const delTask = (taskID) => {
    database.ref('tasks/'+taskID).remove();
}
Enter fullscreen mode Exit fullscreen mode

delete working
As the you can see now the delete button is working so let's move on to edit button.

Edit task popup

In order to edit the task we require a popup which will contain a form to edit the task.

To make this popup simple create a <div> with a heading, text input and button and fix the position of div at center of screen set the <div> hidden property to true <div hidden="true"> it will be displayed using javascript when edit button is clicked.

image
I made it like this you can use your creativity.

Edit the task in database

similar to delete button add onclick to updatePopup function and pass two parameters this time the taskID and the task itself.

<button class="update" onclick="updatePopup('${data[taskID].task.replace(/'/g, "\\'")}','${taskID}');">
Enter fullscreen mode Exit fullscreen mode

this function will open the edit popup and then we will set the text input value to the task then it can be edited and using the task id we will update the task.

if you are thinking why I have added .replace(/'/g, "\\'") then it's a regex statement to replace all ' with \' so that task with single quote can also be edited.

updateForm.onsubmit = (e) =>{
    e.preventDefault();
    database.ref('tasks/'+updateTaskid.value).update({
        'task':updateText.value
    })
    updateSection.hidden = true;

}

Enter fullscreen mode Exit fullscreen mode

in the update button in popup will call another function which will take the new edited task and update it, here also a .update() will be used like .set() and the changed data will be passed as parameter.

edit working

Try it yourself



Till Now most of our database problems are solved now we can create database add data to it, edit it and view it also whenever required.

Syntax to Remember by now

Here are the code blocks you can have look to review what we have done by now

  • Call the database instance
const database = firebase.database(); 
Enter fullscreen mode Exit fullscreen mode
  • refer the path to object, basically a location to the object
database.ref('tasks');
Enter fullscreen mode Exit fullscreen mode
  • push data to reference in form of object
database.ref('tasks').push().set({ 
        'task' : taskInput.value
    })
Enter fullscreen mode Exit fullscreen mode
  • .on to read data when a change occur in reference. all the data contained in snapshot.val(); and for loop can be used to get each part of data.
database.ref('tasks').on('value',(snapshot) => {

    data = snapshot.val();  //data is a object with all data

    for(var taskID in data){
        const eachData = data[taskID]; 
        //use for loop to get each
    }
})
Enter fullscreen mode Exit fullscreen mode
  • changing .on to .once will only take data when Loaded
database.ref('tasks').once('value',(snapshot) => {
    data = snapshot.val();
})
Enter fullscreen mode Exit fullscreen mode
  • to remove data from a reference
database.ref('tasks/TaskID').remove();
Enter fullscreen mode Exit fullscreen mode
  • use .update() to update data specified reference will altered
database.ref('tasks/TaskID').update({
        'task':'Updated Task'
    })

Enter fullscreen mode Exit fullscreen mode

What Next

There is one more thing which is important and haven't discussed by now Querying the database, I hope you know what that mean.

We will be exploring query in Realtime Db and will make another project also to see how it works.


Follow me to get updates tomorrow

areeburrub image

Buy Me A Coffee

Discussion (0)