Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
TaffyDB – A JavaScript Database for Your Browser
TaffyDB is a lightweight and powerful in-memory database that can be used in both browser and server-side applications. It is open-source and free to use. In this tutorial, we will take a couple of examples to show how you can use TaffyDB to store some data, execute some queries on the data, and also perform important operations on the data.
Let's Start with a Simple Example
Let's start with a very basic example in which we will create some data and then try to print that data on the browser.
The first step for us is to have TaffyDB. For that, we have different options. The most basic one is to use a URL where the minified version of the "taffydb.js" file is present.
The code of "taffydb.js" can be found on this link. I would suggest that you open this link and then copy the code and paste it inside a file named "taffy.js". Else, you can just use its CDN.
Now with the dependency handled, let's focus on the "index.html" file in which we will be writing the core logic, of course, inside a <script> tag. Consider the HTML code shown below.
Example
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaffyDB</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
<script>
let countries = TAFFY([{
name: "India",
state: "Uttar Pradesh",
capital: "New Delhi",
}, {
name: "USA",
state: "California",
capital: "Washington DC",
}, {
name: "Germany",
state: "Berlin",
capital: "Berlin",
}]);
let countriesNames = [];
countries().each(function(r) {
countriesNames.push(r.name);
});
document.write(countriesNames);
</script>
</head>
<body>
</body>
</html>
If you run the above code in the browser, you should expect to see the following output.
In the above code, we first imported the "taffy.js" file and then we created a <script> tag inside the &ly;head> tag itself. Inside the <script> tag, we created a TAFFY object in which we created an array of objects, in which multiple objects with different properties are present.
Then we iterated over the values of the countries variable and for each of them, we have put the values of the "name" property inside an array called "countriesName".
If you run the above code in the browser, you should expect to see the following output.
Inserting Records Using TaffyDB
In the above example, we created an array of objects and passed it to the TIFFY method. Now let's focus on inserting a new object to the data, and we can do that with the help of the insert() method. Inside the insert() method, we can pass the same properties or different properties, depending on our choice.
Consider the code snippet shown below with which we can add data to the countries variable in TaffyDB.
countries.insert({ name: "Brazil", state: "State of São Paulo", capital: "BrasÃlia", });
Example
index.html
The updated index.html code is shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaffyDB</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
<script>
let countries = TAFFY([{
name: "India",
state: "Uttar Pradesh",
capital: "New Delhi",
}, {
name: "USA",
state: "California",
capital: "Washington DC",
}, {
name: "Germany",
state: "Berlin",
capital: "Berlin",
}]);
countries.insert({
name: "Brazil",
state: "State of São Paulo",
capital: "BrasÃlia",
});
let countriesNames = [];
countries().each(function(r) {
countriesNames.push(r.name);
});
document.write(countriesNames);
</script>
</head>
<body>
</body>
</html>
If you run the above code in the browser, you should expect to see the following output −
Performing Queries Using TaffyDB
While we did perform a query in the above example, let's perform a simple query again in which we want to store the name of the country whose capital and the state have the same value in our data.
Example
index.html
Consider the index.html code shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaffyDB</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
<script>
let countries = TAFFY([{
name: "India",
state: "Uttar Pradesh",
capital: "New Delhi",
}, {
name: "USA",
state: "California",
capital: "Washington DC",
}, {
name: "Germany",
state: "Berlin",
capital: "Berlin",
}]);
countries.insert({
name: "Brazil",
state: "State of São Paulo",
capital: "BrasÃlia",
});
let res = [];
countries().each(function(r) {
if (r.state === r.capital) {
res.push(r.name)
}
});
document.write(res);
</script>
</head>
<body>
</body>
</html>
In the above HTML code, we are iterating over all the values of the countries variable with the help of the each() method and then comparing the "capital" and "state" property values with them. Then we are putting the values in an array if they match, and finally printing the array in the console.
If we run the above HTML file in the browser, we will get the following output in the terminal.
Now let's perform one more query and this time, we want to print the name of the country that is smallest in the lexicographical order. From the data that we have in the examples shown above, it would be "Brazil". Consider the HTML code shown below.
Example
index.html
Consider the index.html code shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaffyDB</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
<script>
let countries = TAFFY([{
name: "India",
state: "Uttar Pradesh",
capital: "New Delhi",
}, {
name: "USA",
state: "California",
capital: "Washington DC",
}, {
name: "Germany",
state: "Berlin",
capital: "Berlin",
}]);
countries.insert({
name: "Brazil",
state: "State of São Paulo",
capital: "BrasÃlia",
});
let res = countries().order("name").first().name;
document.write(res);
</script>
</head>
<body>
</body>
</html>
In the above code, the line with the code, countries().order("name").first().name, is the one in which we are using a technique called chaining in which multiple methods are chained. First, we order the data by the name property and then from that sorted data, we pick the first element and then finally, we extract the name property from that element.
If you run the above HTML file in the browser, you will get the following output in the terminal.
Updating the Data Using TaffyDB
Updating the data in TaffyDB can be done with the help of the update() method. In this method, if we pass a property that doesn't exist in the object, then it will be appended; and if it does exist, then it will be updated.
Suppose you want to add a field in the object with the name "India" and add a new property called financialCapital : "Mumbai". Consider the HTML code shown below.
Example
index.html
Consider the index.html code shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaffyDB</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
<script>
let countries = TAFFY([{
name: "India",
state: "Uttar Pradesh",
capital: "New Delhi",
}, {
name: "USA",
state: "California",
capital: "Washington DC",
}, {
name: "Germany",
state: "Berlin",
capital: "Berlin",
}]);
countries.insert({
name: "Brazil",
state: "State of São Paulo",
capital: "BrasÃlia",
});
countries({
name: "India"
}).update({
financialCapital: "Mumbai"
})
countries().each(function(r) {
if (r.name == "India") {
document.write(r.financialCapital + "<br>")
} else {
document.write(r.capital + "<br>")
}
})
</script>
</head>
<body>
To verify whether the data that we added was to the database or not, I am iterating over the object and then with a simple "if-else" condition, printing the values.
If you run the above HTML file in the browser, you will get the following output in the terminal.
Using the "!" Operator
By using the "!" operator, you can write complex queries in TaffyDB. Consider the index.html code shown below in which I am trying to print all the countries with the name except India by using the "!" operator.
Example
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaffyDB</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
<script>
let countries = TAFFY([{
name: "India",
state: "Uttar Pradesh",
capital: "New Delhi",
}, {
name: "USA",
state: "California",
capital: "Washington DC",
}, {
name: "Germany",
state: "Berlin",
capital: "Berlin",
}]);
countries.insert({
name: "Brazil",
state: "State of São Paulo",
capital: "BrasÃlia",
});
countries({
name: {
"!is": "India"
}
}).each(function(r) {
document.write(r.name + "<br>");
})
</script>
</head>
<body>
</body>
</html>
If you run the above HTML file in the browser, you will get the following output in the terminal.
Conclusion
In this tutorial, we used multiple examples to demonstrate how you can perform CRUD operations in TaffyDB.
164 Views
