JavaScript
Database Operations

18min
Performing Serverless Database Operations
Introduction
This section explains how to implement the CRUD (Create, Read, Update and Delete) Operations
in a JavaScript environment through Back4App.
It also provides code snippets and an online environment to execute and test your code with no local setup.
See more about Parse SDK at Parse JavaScript SDK API Reference and Parse open source documentation for JavaScript SDK.
Prerequisites
There are no additional requisites other than having the basic knowledge of JavaScript.
Optional: To complete this tutorial using your own app, you will need:
An app created and configured for JavaScript at Back4App.
Note: Follow the JavaScript Install Parse SDK tutorial to learn how you can do that.
1 - Set up the environment
This guide uses the JSbin platform as a code editor.
It’s very easy to use, all you need to do is open its main page and click on the HTML, JavaScript and Console buttons:
﻿
The first step to start coding is to include the Parse API and to add your App’s keys.
For this tutorial, a public Back4App app has been created so that you can check your changes on the database without having to create your own app.
Optional: To check the Parse database for this example, you need to create your own app and access the Parse Dashboard option.
To include Parse API in your app, add the following line of code inside the HTML’s head tag:
<script type="text/javascript" src="https://npmcdn.com/parse/dist/parse.min.js"></script>
Then add your your credentials in the beginning of the JavaScript file. The default keys are the ones related to our public app.
//Paste your Application Key and JavaScript Key, respectively
Parse.initialize("JfMeozLs8UZFxaZibAiZhlpDl5OZkyjVwzdxLfqw", "fi6LWURzRGmTg7neZfI79MJaB2QHjWhiZ4nVFvKD");
Parse.serverURL = "https://parseapi.back4app.com/";
In this tutorial, we will build the CRUD Operations based on a Pet class that has a name and an age fields, in which name is a string and age is a number. Because of that, the code should start by creating a subclass of the Pet class so that it can be used later in our functions, as shown below:
var Pet = Parse.Object.extend("Pet");
All of the basic operations will require the user to say what is the desired Pet’s name. That way, create a global variable “textName”. It’s also a good idea to create a “textAge” one, which will be used in create and update methods.
var textName = "myName";
var textAge = 10;
2 - Create
The create function will create a new Pet with the name and age that you provided in the “textName” and “textAge” variables.
To build that function, just follow these steps:
Make a new instance of the Parse’s Pet class with the command
Use the set function to set the parameters for this object.
Call the save function, which will effectively register the pet to your database in theParse Dashboard.
You can open the Back4App JavaScript Create Function to see the code that has already been implemented.
The code for the create function is written below:
create.js
1   create();
2
3   function create() {
4       mypet = new Pet();
5       mypet.set("name", textName);
6       mypet.set("agePet", textAge);
7
8       mypet.save().then(function(pet){
9            console.log('Pet created successful with name: ' + pet.get("name") + ' and age: ' + pet.get("agePet"));
10      }).catch(function(error){
11           console.log('Error: ' + error.message);
12      });
13  }
1   create();
2
3   function create() {
4       mypet = new Pet();
5       mypet.set("name", textName);
6       mypet.set("agePet", textAge);
7
8       mypet.save().then(function(pet){
9            console.log('Pet created successful with name: ' + pet.get("name") + ' and age: ' + pet.get("agePet"));
10      }).catch(function(error){
11           console.log('Error: ' + error.message);
12      });
13  }
﻿
To test it, paste this code snippet in the JavaScript file in the JSbin, click on
the Run button in the console part and wait for the output.
It should print that the pet was created successfully.
To confirm that the new object is in the database, you can access the Parse Dashboard or you can code the read function.
3 - Read
The read function is responsible for querying the database and returning the object that matches your search criteria. It can also be used to check the existence of an object.
Here’s the step-by-step guide for building your own read function:
Make an instance of the Parse’s Query class.
Add constraints to your query to restraint the search. More constraints options can be found in Parse Query Documentation.﻿
Do a Query’s search method. This tutorial will use query.first to get only the first element that matches your criteria.
If the operations succeed, a pet object will be returned. If no object is found, the return object will have an value of undefined.
You can open the Back4App JavaScript Read Function to see the code that has already been implemented.
The code for the read function is the following:
read.js
1   read();
2
3   function read() {
4       query = new Parse.Query(Pet);
5       query.equalTo("name", textName);
6       query.first().then(function(pet){
7           if(pet){
8              console.log('Pet found successful with name: ' + pet.get("name") + ' and age: ' + pet.get("agePet"));
9           } else {
10             console.log("Nothing found, please try again");
11          }
12      }).catch(function(error){
13          console.log("Error: " + error.code + " " + error.message);       
14      });
15  }
1   read();
2
3   function read() {
4       query = new Parse.Query(Pet);
5       query.equalTo("name", textName);
6       query.first().then(function(pet){
7           if(pet){
8              console.log('Pet found successful with name: ' + pet.get("name") + ' and age: ' + pet.get("agePet"));
9           } else {
10             console.log("Nothing found, please try again");
11          }
12      }).catch(function(error){
13          console.log("Error: " + error.code + " " + error.message);       
14      });
15  }
﻿
To test the read function, paste the snippet to your JSBin JavaScript file. When the code runs, it wil print the age of the pet found (if found) or else will print that no pet was found.
If while testing the printed age does not correspond to the age of your object, it means that there are
 more objects with the same name, but your query only returns one of them. So, to really test the read function, create an object with another name, one that no one has created yet, then run the function, which will correctly print the age of the object.
4 - Update
For the update function, a pet is passed as parameter and the function changes it’s age to the one you provided in the “textAge” variable. To find the pet which will be passed, we use a modified version of our read function.
Below are the steps to make your own update function:
Write a modified read function called readThenUpdate, which calls the update function when it finds a pet successfully.
In the update function, use the set function to modify the parameters of your pet.
Call the save function for this pet to push the changes to the database.
You can open the Back4App JavaScript Update Function to see the code that has already been implemented.
Here’s the code for the readThenUpdate function and update function:
update.js
1   readThenUpdate();
2
3   function readThenUpdate() {
4       query = new Parse.Query(Pet);
5       query.equalTo("name", textName);
6       query.first().then(function (pet) {
7         if (pet) {
8           console.log('Pet found with name: ' + pet.get("name") + ' and age: ' + pet.get("agePet"));
9           update(pet);
10        } else {
11          console.log("Nothing found, please try again");
12        }
13      }).catch(function (error) {
14        console.log("Error: " + error.code + " " + error.message);
15      });
16  }
17
18  function update(foundPet) {
19      textName = "myNameUpdated";
20      textAge = 20;
21      console.log(textAge);
22      foundPet.set('name', textName);
23      foundPet.set('agePet', textAge);
24
25      foundPet.save().then(function (pet) {
26        console.log('Pet updated! Name: ' + pet.get("name") + ' and new age: ' + pet.get("agePet"));
27      }).catch(function(error) {
28        console.log('Error: ' + error.message);
29      });
30  }
1   readThenUpdate();
2
3   function readThenUpdate() {
4       query = new Parse.Query(Pet);
5       query.equalTo("name", textName);
6       query.first().then(function (pet) {
7         if (pet) {
8           console.log('Pet found with name: ' + pet.get("name") + ' and age: ' + pet.get("agePet"));
9           update(pet);
10        } else {
11          console.log("Nothing found, please try again");
12        }
13      }).catch(function (error) {
14        console.log("Error: " + error.code + " " + error.message);
15      });
16  }
17
18  function update(foundPet) {
19      textName = "myNameUpdated";
20      textAge = 20;
21      console.log(textAge);
22      foundPet.set('name', textName);
23      foundPet.set('agePet', textAge);
24
25      foundPet.save().then(function (pet) {
26        console.log('Pet updated! Name: ' + pet.get("name") + ' and new age: ' + pet.get("agePet"));
27      }).catch(function(error) {
28        console.log('Error: ' + error.message);
29      });
30  }
﻿
To confirm if the update function is working, paste the code above to the JavaScript file in the JSBin page.
Use an unusual name for your object to not conflict with other users, then follow these steps:

1. Create an object with your desired name.
2. Check that the object is created with your read function.
3. Call your readThenUpdate function made in this topic with an age different than the original one.
4. Check if the age of the Pet has changed by calling your read function again.
5 - Delete
The delete function erases a pet received by the read function. It is an irreversible action, which means that you should be careful while using it, especially because your read function might return more objects than you actually want to delete. Because of that, it’s recommended to delete only one object at a time. The steps for writing your own delete function can be found below:
In the end of the success of your “read” function (readThenDelete in this example), make a call for the delete function.
In the deletePet function, call the destroy method on the received object “foundPet”.
You can open the Back4App JavaScript Delete Function to see the code that has already been implemented.
Here’s the code for the readThenDelete function and deletePet function:
delete.js
1   readThenDelete();
2
3   function readThenDelete() {
4       query = new Parse.Query(Pet);
5       query.equalTo("name", textName);
6       query.first().then(function (pet) {
7           if (pet) {
8               console.log('Pet found with name: ' + pet.get("name") + ' and age: ' + pet.get("agePet"));
9               deletePet(pet);
10          } else {
11              console.log("Nothing found, please try again");
12              return null;
13          }
14      }).catch(function (error) {
15          console.log("Error: " + error.code + " " + error.message);
16          return null;
17      });
18  }
19
20  function deletePet(foundPet) {
21      foundPet.destroy().then(function(response) {
22        console.log('Pet '+ foundPet.get("name") + ' erased successfully');
23      }).catch(function(response, error) {
24        console.log('Error: '+ error.message);
25      });
26  }
1   readThenDelete();
2
3   function readThenDelete() {
4       query = new Parse.Query(Pet);
5       query.equalTo("name", textName);
6       query.first().then(function (pet) {
7           if (pet) {
8               console.log('Pet found with name: ' + pet.get("name") + ' and age: ' + pet.get("agePet"));
9               deletePet(pet);
10          } else {
11              console.log("Nothing found, please try again");
12              return null;
13          }
14      }).catch(function (error) {
15          console.log("Error: " + error.code + " " + error.message);
16          return null;
17      });
18  }
19
20  function deletePet(foundPet) {
21      foundPet.destroy().then(function(response) {
22        console.log('Pet '+ foundPet.get("name") + ' erased successfully');
23      }).catch(function(response, error) {
24        console.log('Error: '+ error.message);
25      });
26  }
﻿
To test it, it’s recommended to create an object with an unusual name just like the other functions to
 not conflict with objects from other users.
Just paste the snippet to the JSBin and run the code with the name of your object and the object that will be deleted.
Then, you can call your read function to confirm that there are no objects with that name.
If the read returns an object, which it shouldn’t, it probably means that you have more objects with the
 same name and it returned one of them as the delete function just deletes one object.
You can check your object by accessing your Parse Dashboard.
It’s done!
At this point, you have learned how to do the basic CRUD operations with JavaScript.
Updated 28 Mar 2024
Did this page help you?
Install Parse SDK
User Registration - login