Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
Getting Started with TaffyDB
The first step is to include TaffyDB in your project. You can use the CDN link or download the library directly from the official repository.
Basic Example - Creating and Reading Data
Let's start with a basic example where we create some data and display it in the browser.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaffyDB</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
</head>
<body>
<div id="output"></div>
<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.getElementById('output').innerHTML = countriesNames.join(', ');
</script>
</body>
</html>
India, USA, Germany
In this example, we create a TAFFY object with an array of country objects. We then iterate over the data using the each() method to extract country names.
Inserting Records
You can add new records to your TaffyDB collection using the insert() method:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaffyDB Insert</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
</head>
<body>
<div id="output"></div>
<script>
let countries = TAFFY([{
name: "India",
state: "Uttar Pradesh",
capital: "New Delhi",
}, {
name: "USA",
state: "California",
capital: "Washington DC",
}]);
// Insert new record
countries.insert({
name: "Brazil",
state: "State of São Paulo",
capital: "Brasília",
});
let countriesNames = [];
countries().each(function(r) {
countriesNames.push(r.name);
});
document.getElementById('output').innerHTML = countriesNames.join(', ');
</script>
</body>
</html>
India, USA, Brazil
Querying Data with Conditions
TaffyDB allows you to perform complex queries. Here's an example that finds countries where the state and capital have the same value:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaffyDB Query</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
</head>
<body>
<div id="output"></div>
<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 result = [];
countries().each(function(r) {
if (r.state === r.capital) {
result.push(r.name);
}
});
document.getElementById('output').innerHTML = 'Countries with same state and capital: ' + result.join(', ');
</script>
</body>
</html>
Countries with same state and capital: Germany
Sorting and Method Chaining
TaffyDB supports method chaining for complex operations. Here's how to find the first country in alphabetical order:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaffyDB Sorting</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
</head>
<body>
<div id="output"></div>
<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",
}, {
name: "Brazil",
state: "State of São Paulo",
capital: "Brasília",
}]);
let firstCountry = countries().order("name").first().name;
document.getElementById('output').innerHTML = 'First country alphabetically: ' + firstCountry;
</script>
</body>
</html>
First country alphabetically: Brazil
Updating Records
The update() method allows you to modify existing records or add new properties:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaffyDB Update</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
</head>
<body>
<div id="output"></div>
<script>
let countries = TAFFY([{
name: "India",
state: "Uttar Pradesh",
capital: "New Delhi",
}, {
name: "USA",
state: "California",
capital: "Washington DC",
}]);
// Update India record with new property
countries({name: "India"}).update({financialCapital: "Mumbai"});
let output = '';
countries().each(function(r) {
if (r.name === "India") {
output += r.name + ': ' + r.financialCapital + '<br>';
} else {
output += r.name + ': ' + r.capital + '<br>';
}
});
document.getElementById('output').innerHTML = output;
</script>
</body>
</html>
India: Mumbai USA: Washington DC
Using the "!" Operator for Complex Queries
TaffyDB supports the "!" operator for negation queries. Here's how to select all countries except India:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaffyDB Negation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
</head>
<body>
<div id="output"></div>
<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",
}, {
name: "Brazil",
state: "State of São Paulo",
capital: "Brasília",
}]);
let output = 'Countries excluding India:<br>';
countries({name: {"!is": "India"}}).each(function(r) {
output += r.name + '<br>';
});
document.getElementById('output').innerHTML = output;
</script>
</body>
</html>
Countries excluding India: USA Germany Brazil
Key TaffyDB Methods
| Method | Purpose | Example |
|---|---|---|
insert() |
Add new records | db.insert({name: "Japan"}) |
update() |
Modify existing records | db({id: 1}).update({name: "Updated"}) |
each() |
Iterate over results | db().each(function(r) {...}) |
order() |
Sort results | db().order("name") |
first() |
Get first record | db().first() |
Conclusion
TaffyDB provides a powerful and lightweight solution for client-side data management. With its SQL-like query capabilities and method chaining, it's perfect for managing complex data operations in web applications without requiring a server-side database.
684 Views
