Firebase CRUD operations with JavaScript and jQuery

Firebase CRUD operations with JavaScript and jQuery

Firebase CRUD operations with JavaScript and jQuery

Hello Friends, in this tutorial we are going to learn how to do data operations on Firebase i.e. CRUD operations in Firebase with JavaScript and jQuery. This tutorial is a follow up to the the tutorial Auth Schemes in Google Firebase and Custom Router for Firebase jQuery App.

To understand Firebase CRUD operations, we will have the Movie as our entity which is being added, viewed, updated or removed.


As our custom router is going to load the template, and fill it with data in following way:

var Auth = require('./auth');
var Router = require('./router');

//Redirect to some Page or URL
var redirect = function(to) {

var appRouter = new Router({
  mountPoint: '#root',
  indexRoute: 'index',
  routes: {
    login : {
      path: 'login',
      templateUrl: 'partials/login.html',
      onEnter: function() {
        var user = Auth.checkLoggedInUser();
        if( !user && window.location.hash.match('/login') ){
          return true;
        } else {
          return 'index';
      controller: require('./controllers/login')(Auth, redirect)

Here in above code, you can see the controller key for a particular route. Which grabs the module and executes it with its dependencies i.e. `Auth` and `redirect`.

Add and Update

Add Data

So To Add the data, following method from Firebase API can be used:

var key = firebase.database().ref().child('movies').push(data).key;

In the above code we are getting the reference of DB from `firebase.database().ref()`. And then going to the `movies` node by `.child(‘movies’)` where we are going to save the new data.

And then pushing it to the node by `.push(data)`. This saves the data to Firebase and returns the newly created object reference.

So the `.key` attribute after `push` will give the key with which new data has been saved.

Now for out application, we want to save same data in two different locations/endpoints simultaneously. So we are going to follow the Update approach to add the new data.

In this first we push the empty data to generate a new empty node with key. And then do update operations on the `key` itself.

Following code demonstrates that.

var Key = firebase.database().ref().child('movies').push().key;

// Write the new post's data simultaneously in the movies list and the user's movie list.
var updates = {};
updates['/movies/' + Key] = movie;
updates['/user-movies/' + uid + '/' + Key] = movie;

return firebase.database().ref().update(updates);

Here we have created an associative array with all the updates that we wanna perform. So for two paths, same data is going to be saved.

Update Data

This updates array can be passed to the update method on the Firebase DB reference as `firebase.database().ref().update(updates)`.

In our example, it will be done in three steps

  1. Load the Data
  2. Fill The Data
  3. After edits, on clicking save, Save the data on same reference

First and Third step will utilize the key that they receive from the router. Following code demonstrates that:

//See complete file at
var query = firebase.database().ref("movies/";

//Fire Query

//Fill The form data
function fillData(snap) {
  var data = snap.val();
  $('#generes').val((data.generes || []).join(', '))
  $('#directors').val((data.directors || []).join(', '))
  $('#actors').val((data.actors || []).join(', '))

//Save function (similar to Adding the data. 
//This time we don't generate new key but utlize the one received from Router parameter
function saveMovie(movie) {
  var uid = firebase.auth().currentUser.uid;
  var postKey =; //Params is received from the Router
  var updates = {};
  updates['/movies/' + postKey] = movie;
  updates['/user-movies/' + uid + '/' + postKey] = movie;

  return database.ref().update(updates);


To list and view the data, we just need to execute the query. And the Firebase DB reference is query by itself. So on creating the reference and then attaching the event handler will let us read and render the results.

Following code queries and passes to the render function for single item.

var query = firebase.database().ref("movies").limitToFirst(20);
  .then(function(snapshot) {

var renderSingleSnapshot = function(singleSnapshot){
  // ... code to render

The data received from Firebase is called `snapshot`. The `snapshot` has few `methods` and `iterators` with it. Those can be used to retrieve values and keys from snapshot or loop over the data.


Removing the data is also not a hassle, though we are not implementing it in out MovieDB application for now.

Following code shows that `remove()` method can be used to remove the and key reference:


So creating a function and calling it with event handler will look like that. Though the button to trigger the delete event must have the `data-key` attribute. And the value of this attribute is the key which needs to be removed.

var remove = function(e){
  var key = $(this).data('key');
  if(confirm('Are you sure?')){
$(document).on('click', '.btn-remove-key', remove);

Hence the above code will be functional for the buttons and links created like this:

<button type="button" class="btn-remove-key" data-key="-dsdsf-sample-key">Delete</button>
<a ref="#" class="btn-remove-key" data-key="-dsdsf-sample-key">Delete</a>
<span class="btn-remove-key" data-key="-dsdsf-sample-key">Delete</span>

So in this way, you can perform Firebase CRUD Operations. Please let us know about your views about the article in comments.

And if your facing or faced the problems while implementing this or similar solution, please share it with us in comments.

10 thoughts on “Firebase CRUD operations with JavaScript and jQuery

Got Something To Say:

Your email address will not be published. Required fields are marked *