JavaScript
Database Operations
18 min
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 html , javascript javascript and console 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 parse dashboard option to include parse api in your app, add the following line of code inside the html html ’s head tag then add your your credentials at the beginning of the javascript javascript file the default keys are the ones related to our public app //paste your application key and javascript key, respectively parse initialize("your application id", "your javascript key"); parse serverurl = "https //parseapi back4app com/"; in this tutorial, we will build the crud operations based on a pet class that has name and age fields, in which name is a string and the 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 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 set function to set the parameters for this object call the save save function, which will effectively register the pet to your database in the parse dashboard parse dashboard you can open the back4app javascript create function to see the code that has already been implemented the code for the create create function is written below create js create(); function create() { mypet = new pet(); mypet set("name", textname); mypet set("agepet", textage); mypet save() then(function(pet){ console log('pet created successful with name ' + pet get("name") + ' and age ' + pet get("agepet")); }) catch(function(error){ console log('error ' + error message); }); } to test it, paste this code snippet in the javascript file in the jsbin , click on the run 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 parse dashboard or you can code the read read function 3 read the read 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 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 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 read function is the following read js read(); function read() { query = new parse query(pet); query equalto("name", textname); query first() then(function(pet){ if(pet){ console log('pet found successful with name ' + pet get("name") + ' and age ' + pet get("agepet")); } else { console log("nothing found, please try again"); } }) catch(function(error){ console log("error " + error code + " " + error message); }); } to test the read 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 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 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 read function below are the steps to make your own update update function write a modified read function called readthenupdate readthenupdate , which calls the update update function when it finds a pet successfully in the update update function, use the set set function to modify the parameters of your pet call the save 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 readthenupdate function and update update function update js readthenupdate(); function readthenupdate() { query = new parse query(pet); query equalto("name", textname); query first() then(function (pet) { if (pet) { console log('pet found with name ' + pet get("name") + ' and age ' + pet get("agepet")); update(pet); } else { console log("nothing found, please try again"); } }) catch(function (error) { console log("error " + error code + " " + error message); }); } function update(foundpet) { textname = "mynameupdated"; textage = 20; console log(textage); foundpet set('name', textname); foundpet set('agepet', textage); foundpet save() then(function (pet) { console log('pet updated! name ' + pet get("name") + ' and new age ' + pet get("agepet")); }) catch(function(error) { console log('error ' + error message); }); } to confirm if the update 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 read function 3\ call your readthenupdate 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 read function again 5 delete the delete delete function erases a pet received by the read read function it is an irreversible action, which means that you should be careful while using it, especially because your read 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 delete function can be found below in the end of the success of your “read” function ( readthendelete readthendelete in this example), make a call for the delete delete function in the deletepet 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 readthendelete function and deletepet deletepet function delete js readthendelete(); function readthendelete() { query = new parse query(pet); query equalto("name", textname); query first() then(function (pet) { if (pet) { console log('pet found with name ' + pet get("name") + ' and age ' + pet get("agepet")); deletepet(pet); } else { console log("nothing found, please try again"); return null; } }) catch(function (error) { console log("error " + error code + " " + error message); return null; }); } function deletepet(foundpet) { foundpet destroy() then(function(response) { console log('pet '+ foundpet get("name") + ' erased successfully'); }) catch(function(response, error) { console log('error '+ error message); }); } 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 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 delete function just deletes one object you can check your object by accessing your parse dashboard parse dashboard it’s done! at this point, you have learned how to do the basic crud operations with javascript