Categories
Express JavaScript Testing

Adding Database Interactions to Express Apps

Most back end apps need to interact with a database to do something useful. With Express apps, we can add database interactivity easily.

In this article, we’ll look at how to get and save data into an SQLite database with an Express app.

Getting Started

We get started by creating a project folder, then go in it and run:

npm init -y

to create a package.json file.

The -y flag just answers all the question from npm init with the default options.

Next, we install Express, body-parser to parse request bodies, and sqlite3 for interacting with our SQLite database by running:

npm i express sqlite3 body-parser

Building Our App

Initialization Code

The app we build will get and save data to the persons database.

To start, we create an app.js for the app. Then we create the app by first importing the packages we need to use and setting the port that our app will listen to connections to.

To do this, we add:

const express = require('express');  
const sqlite3 = require('sqlite3').verbose();  
const bodyParser = require('body-parser');  
const app = express();  
const port = 3000;

We include the packages we installed earlier, including Express, body-parser , and sqlite3 .

Then we create an instance of our Express app and set the port to 3000 to listen to requests on port 3000.

Next, we create our database initialization code. We do this by writing:

const db = new sqlite3.Database('db.sqlite');

The code above tells us that our app will use db.sqlite to get and save data. If it doesn’t exist, it’ll be created on the fly so we don’t have to create it beforehand. Also, we don’t need any credentials to use the database file.

Then we create the person table if it doesn’t already exist by writing:

db.serialize(() => {  
    db.run('CREATE TABLE IF NOT EXISTS persons (id INTEGER PRIMARY KEY, name TEXT, age INTEGER)');  
});

We have an id auto-incrementing integer column, and name and age columns for saving some personal data.

We include IF NOT EXISTS in our CREATE TABLE query so that the database won’t be attempted to be created every time the app restarts. Since if it already exists, the query will fail if the table already exists.

Then we include our body-parser middleware so that JSON request bodies will be parsed into the req.body object as follows:

app.use(bodyParser.json());

Adding the Routes

Now we add the routes for getting and saving data.

First, we add a route to handle GET requests for getting data from the persons table, we add the following:

app.get('/', (req, res) => {  
    db.serialize(() => {  
        db.all('SELECT * FROM persons', [], (err, rows) => {  
            res.json(rows);  
        });  
    })  
})

We use app.get to handle the GET request to the / route.

db.serialize makes sure that each query inside the callback runs in sequence.

Then we select all the rows from the persons table and send the array returned as the response.

Next, we add our POST route to handle the POST request for saving a new entry to the database:

app.post('/', (req, res) => {  
    const { name, age } = req.body;  
    db.serialize(() => {  
        const stmt = db.prepare('INSERT INTO persons (name, age) VALUES (?, ?)');  
        stmt.run(name, age);  
        stmt.finalize();  
        res.json(req.body);  
    })  
})

We start by using the app.post to indicate that we’re handling a POST request. The / means that we’ll handle requests to the / path.

Next, we get the parsed JSON request body returned by body-parser by writing:

const { name, age } = req.body;

We decomposed the fields into variables with the destructing assignment operator.

Next, we create a prepared statement to insert data to the persons table with db.prepare. This lets us set data for the placeholders marked by the ? and also sanitizes the data to avoid SQL injection attacks.

Then we run:

stmt.run(name, age);  
stmt.finalize();

to run the statement and return the response with res.json(req.body); .

Next, we add the route to let us update an entry:

app.put('/:id', (req, res) => {  
    const { name, age } = req.body;  
    const { id } = req.params;  
    db.serialize(() => {  
        const stmt = db.prepare('UPDATE persons SET name = ?, age = ? WHERE id = ?');  
        stmt.run(name, age, id);  
        stmt.finalize();  
        res.json(req.body);  
    })  
})

It’s similar to the POST request route above, except that we’re handling PUT requests.

The difference is that we have an :id in the URL parameter, which we get by writing:

const { id } = req.params;

So when we make a request to /1 , id will be set to 1.

Then we ran our update statement with name , age , and id and return the request body as the response.

Finally, we have our DELETE route to let us delete items from the persons table as follows:

app.delete('/:id', (req, res) => {  
    const { id } = req.params;  
    db.serialize(() => {  
        const stmt = db.prepare('DELETE FROM persons WHERE id = ?');  
        stmt.run(id);  
        stmt.finalize();  
        res.json(req.body);  
    })  
})

It’s similar to the other routes except that we have a delete request and we run a delete statement with the ID.

Then we return the request body as the response.

Finally, we add the following line:

const server = app.listen(port);

So that when we run node app.js , our app will run.

Conclusion

We run our app by running node app.js .

In the end, we have the following code if we put everything together:

const express = require('express');  
const sqlite3 = require('sqlite3').verbose();  
const bodyParser = require('body-parser');  
const app = express();  
const port = 3000;  
const db = new sqlite3.Database('db.sqlite');
db.serialize(() => {  
    db.run('CREATE TABLE IF NOT EXISTS persons (id INTEGER PRIMARY KEY, name TEXT, age INTEGER)');  
});

app.use(bodyParser.json());  
app.get('/', (req, res) => {  
    db.serialize(() => {  
        db.all('SELECT * FROM persons', [], (err, rows) => {  
            res.json(rows);  
        });  
    })  
})

app.post('/', (req, res) => {  
    const { name, age } = req.body;  
    db.serialize(() => {  
        const stmt = db.prepare('INSERT INTO persons (name, age) VALUES (?, ?)');  
        stmt.run(name, age);  
        stmt.finalize();  
        res.json(req.body);  
    })  
})

app.put('/:id', (req, res) => {  
    const { name, age } = req.body;  
    const { id } = req.params;  
    db.serialize(() => {  
        const stmt = db.prepare('UPDATE persons SET name = ?, age = ? WHERE id = ?');  
        stmt.run(name, age, id);  
        stmt.finalize();  
        res.json(req.body);  
    })  
})

app.delete('/:id', (req, res) => {  
    const { id } = req.params;  
    db.serialize(() => {  
        const stmt = db.prepare('DELETE FROM persons WHERE id = ?');  
        stmt.run(id);  
        stmt.finalize();  
        res.json(req.body);  
    })  
})

const server = app.listen(port);

Once we include a database library, we can create an Express app that interacts with a database to make our apps more useful.

Categories
JavaScript Rxjs

Rxjs Filtering Operators — Sample, Skip and Single

RxJS is a library for doing reactive programming. Creating operators are useful for generating data from various data sources to be subscribed to by Observers.

In this article, we’ll look at some filtering operators, including sample, sampleTime,skip, single, and skipLast operators.

sample

The sample operator returns an Observable that emits the value from the source Observable when the notifier Observable emits.

It takes one argument, which is the notifer Observable.

For example, we can use it as follows:

import { interval } from "rxjs";  
import { sample } from "rxjs/operators";
const seconds = interval(1000);  
const result = seconds.pipe(sample(interval(5000)));  
result.subscribe(x => console.log(x));

In the code above, we have the seconds Observable which emits a number every second. Then we pipe the result of it to the sample operator, where we set the notifier Observable which is interval(5000), which emits every 5 seconds.

Therefore, we have a new Observable that emits values from seconds every 5 seconds.

We should see every few values from seconds logged.

sampleTime

The sampleTime operator emits the most recently emitted value from the source Observable in periodic intervals.

It takes up to 2 arguments. The first is the period, which is the period to wait until emitting a value from the source Observable. It’s measured in milliseconds or the time unit of the optional scheduler .

The second argument is the optional scheduler, which defaults to async.

It returns a new Observable that emits value from the source Observable in a specified time interval.

For example, we can use it as follows:

import { interval } from "rxjs";  
import { sampleTime } from "rxjs/operators";
const seconds = interval(1000);  
const result = seconds.pipe(sampleTime(5000));  
result.subscribe(x => console.log(x));

The code above takes the values emitted from the seconds Observable and pipe it to the sampleTime operator, which will emit values from seconds every 5 seconds.

The result will be that we get values emitted from the result Observable, which gets its values from the seconds Observable, every 5 seconds.

We should see some numbers logged from the console.log .

single

single returns an Observable that emits the single item from the source Observable that matches a given condition returned by the predicate function.

If the source Observable emits more than one of such item or no items, then we get IllegalArgumentException or NoSuchElementException respectively.

If the source Observable emits items but none match the condition in the predicate function then undefined is emitted.

It takes one argument, which is the predicate function that returns the condition to match the item emitted from the source Observable.

For example, if we have:

import { of } from "rxjs";  
import { single } from "rxjs/operators";
const numbers = of(1).pipe(single());  
numbers.subscribe(x => console.log(x));

Then we get 1 logged.

If we have:

import { of } from "rxjs";  
import { single } from "rxjs/operators";
const numbers = of(1, 2).pipe(single());  
numbers.subscribe(x => console.log(x));

Then we get the error “Sequence contains more than one element” logged.

If we have:

import { of } from "rxjs";  
import { single } from "rxjs/operators";
const numbers = of(1, 2).pipe(single(x => x % 2 === 0));  
numbers.subscribe(x => console.log(x));

Then we get 2 logged since 2 matches the condition x => x % 2 === 0 .

skip

The skip operator returns an Observable that skips the first count items emitted by the source Observable and emit the rest.

It takes the required count argument, which is the number of items from the source Observable to skip.

For example, if we have:

import { of } from "rxjs";  
import { skip } from "rxjs/operators";

const numbers = of(1, 2, 3, 4, 5).pipe(skip(2));  
numbers.subscribe(x => console.log(x));

Then we get:

3  
4  
5

logged because we specified that we want to skip the first 2 emitted values from of(1, 2, 3, 4, 5) .

skipLast

The skipLast operator returns an Observable that skips the last count values emitted from the source Observable.

It takes the required count argument, which is the number of items from the source Observable to skip from the end of the source Observable.

For example, we can write:

import { of } from "rxjs";  
import { skipLast } from "rxjs/operators";

const numbers = of(1, 2, 3, 4, 5).pipe(skipLast(2));  
numbers.subscribe(x => console.log(x));

Then we get:

1  
2  
3

logged since we specified that we want to skip the last 2 emitted values.

The sample and sampleTime operators return an Observable that emits the value from the source Observable when the notifier Observable emits or at the specified time interval respectively.

single returns an Observable that emits the single item from the source Observable that matches a given condition.

The skip operator returns an Observable that skips the number of items at the start of emitting the values from the Observable.

Finally, skipLast operator returns an Observable that skips the last number of values emitted from the source Observable.

Categories
JavaScript Vue

Introduction to Vue.js Watchers

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at how to define and use Vue.js watchers.

When Should We Use Watchers?

We can use watchers when we want to watch for data changes in reactive properties and do some asynchronous or expensive options as the value changes.

For example, we can use it to watch for changes for an input and then get a joke from the Chuck Norris API when we type in something.

First, we put the following in src/index.js :

new Vue({  
  el: "#app",  
  data: {  
    message: "",  
    joke: ""  
  },  
  created() {  
    this.debounceGetAllCapsMessage = _.debounce(this.getAllCapsMessage, 500);  
  },  
  methods: {  
    async getAllCapsMessage() {  
      const res = await fetch("https://api.icndb.com/jokes/random");  
      const result = await res.json();  
      this.joke = result.value.joke;  
    }  
  },  
  watch: {  
    message(newMessage, oldMessage) {  
      this.debounceGetAllCapsMessage();  
    }  
  }  
});

The code above watches for the change in the message property and then call the debounceGetAllCapsMessage method, which gets a jokes after a half a second delay.

The watch method both takes the new value as the first parameter and the old value as the second parameter.

Then we put the following in index.html :

<!DOCTYPE html>  
<html>  
  <head>  
    <title>Hello</title>  
    <meta charset="UTF-8" />  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>  
  </head> <body>  
    <div id="app">  
      <input type="text" v-model="message" />  
      <p>{{joke}}</p>  
    </div>  
    <script src="./src/index.js"></script>  
  </body>  
</html>

As we can see, we can run an asynchronous operation, add a delay before we perform the operation, and then get the final result.

We can also use vm.$watch to watch for a value. It takes up to 3 arguments.

The first is a path to a property, which is a string. It can also be a function with one or multiple things combined to watch.

The second argument is a function that runs when the value changes.

The third argument for vm.$watch is an object with some properties. They include:

  • immediate — watches for the setting of the initial value

The method returns a function to stop watching for values. This is an optional argument.

We can use it as follows. In src/index.js , we have:

const vm = new Vue({  
  el: "#app",  
  data: {  
    message: "",  
    joke: ""  
  }  
});

vm.$watch(  
  "message",  
  _.debounce(async function() {  
    const res = await fetch("https://api.icndb.com/jokes/random");  
    const result = await res.json();  
    this.joke = result.value.joke;  
  }, 500)  
);

Then index.html , we have:

<!DOCTYPE html>  
<html>  
  <head>  
    <title>Hello</title>  
    <meta charset="UTF-8" />  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>  
  </head> <body>  
    <div id="app">  
      <input type="text" v-model="message" />  
      <p>{{joke}}</p>  
    </div>  
    <script src="./src/index.js"></script>  
  </body>  
</html>

which is the same as what we had before.

In both examples, we should get a new joke after half a second delay displayed.

Conclusion

We can use the watch method in the options and object and vm.$watch to watch for value changes.

The vm.$watch method watches a property given the path to it or a function that returns it or a combination of multiple properties.

vm.$watch takes a value changes handler and we can run code in it to handle when the value of a reactive property change.

The watch method runs code as the value changes.

Also, the watch method both takes the new value as the first parameter and the old value as the second parameter.

Categories
JavaScript Rxjs

Rxjs Filtering Operators — Getting Specific Values

Rxjs is a library for doing reactive programming. Creation operators are useful for generating data from various data sources to be subscribed to by Observers.

In this article, we’ll look at some filter operators, including elementsAt , filter , first , ignoreElements , and last .

elementAt

The elementAt operator lets us get a single value by at the specified index in a sequence of emissions from the source Observable.

It takes up to 2 arguments. The first is the index , which is the number starting from 0 which the source Observable has emitted since subscription.

The second is the defaultValue which is an optional argument for the default value returned if the value is with the given index is not found.

It returns an Observable that emits a single item if it’s found. Otherwise, the default value provided by the optional second argument will be emitted.

A ArgumentOutOfRangeError will be thrown if the index provided is less than 0 or the Observable has completed before emitting the emission with the givenindex .

For example, we can use it as follows:

import { of } from "rxjs";  
import { elementAt } from "rxjs/operators";

const of$ = of(1, 2, 3);  
const result = of$.pipe(elementAt(2));  
result.subscribe(x => console.log(x));

Then we get 3 from console.log .

filter

The filter operator lets us filter out the emitted values from the source Observable by emitting the values from the source Observable that satisfies the conditions that are returned by a predicate function.

It takes up to 2 arguments. The first is the predicate function that’s evaluated each time the source Observable emits a value. The value is checked against this and it’s emitted by the returned Observe if it meets the criteria.

The predicate function takes 2 parameters, which are the object emitted from the source Observable and the index respectively. index starts from 0 and it’s the index -th object emitted since subscription.

For example, we can use it as follows:

import { of } from "rxjs";  
import { filter } from "rxjs/operators";

const of$ = of(1, 2, 3, 4, 5, 6);  
const result = of$.pipe(filter(x => x % 2 === 0));  
result.subscribe(x => console.log(x));

Then we get:

2  
4  
6

first

The first operator emits only the first value emitted by the source Observable.

It takes 2 optional arguments. The first is the predicate function which is called with each item to test for conditional matching.

The second is the default value, which is optional. It’s the default value that’s emitted in case no valid value was found from the source.

For example, we can use it as follows:

import { of } from "rxjs";  
import { first } from "rxjs/operators";

const of$ = of(1, 2, 3, 4, 5, 6);  
const result = of$.pipe(first());  
result.subscribe(x => console.log(x));

The code above takes the values from the of$ Observable and emits the first one, so we get 1 from the console.log .

We can also pass in a function to check for a match from the source Observable. For example, we can write:

import { of } from "rxjs";  
import { first } from "rxjs/operators";

const of$ = of(1, 2, 3, 4, 5, 6);  
const result = of$.pipe(first(x => x % 3 === 0));  
result.subscribe(x => console.log(x));

Since we passed in x => x % 3 === 0 to thefirst operator, first will check for the first one that matches our condition, which is a number that’s evenly divisible by 3.

Then we get the value 3 from console.log since that’s the first number of of$ that matches the condition.

We can pass in a default value as the second argument of first :

import { of } from "rxjs";  
import { first } from "rxjs/operators";  
const of$ = of(1, 2, 3, 4, 5, 6);  
const result = of$.pipe(first(x => x % 3 === 10, "none"));  
result.subscribe(x => console.log(x));

Since there’s no number in of$ that has the remainder 10 when divided by 3, the 'none' string will be emitted by the returned Observable.

ignoreElements

ignoreElements ignores all items emitted by the source Observable and only passes calls of complete or error .

It takes no arguments.

For example, we can use it as follows:

import { of } from "rxjs";  
import { ignoreElements } from "rxjs/operators";  
const of$ = of(1, 2, 3, 4, 5, 6);  
const result = of$.pipe(ignoreElements());  
result.subscribe(  
  val => console.log(val),  
  err => console.log(err),  
  () => console.log("end")  
);

Since nothing from the of$ Observable is emitted before completion, we just get 'end' logged.

last

The last operator returns an Observable that emits only the last item that’s emitted by the source Observable. If a predicate function is passed into last , then the last value that matches the condition returned by the predicate will be emitted.

It takes 2 optional arguments. The first is the predicate, which is optional. The predicate returns the condition that the emitted value from the source has to satisfy.

The second is an optional argument for the defaultValue , which the value that’ll be emitted if nothing emitted from the source Observable meets the condition returned by the predicate function.

For example, we can use it as follows:

import { of } from "rxjs";  
import { last } from "rxjs/operators";  
const of$ = of(1, 2, 3, 4, 5, 6);  
const result = of$.pipe(last());  
result.subscribe(val => console.log(val));

Then we get 6 logged since it’s the last value emitted by the of$ Observable.

We can also specify a condition as follows:

import { of } from "rxjs";  
import { last } from "rxjs/operators";  
const of$ = of(1, 2, 3, 4, 5, 6);  
const result = of$.pipe(last(x => x % 2 === 1));  
result.subscribe(val => console.log(val));

Then we get 5 logged since it’s the last value from the of$ Observable that’s odd.

elementAt operator lets us get a single value by at the specified index in a sequence of emissions from the source Observable.

The filter operator only emits the values from the source Observable that satisfies the conditions that are returned by a predicate function.

first operator emits only the first value emitted by the source Observable.

ignoreElements and only passes calls of complete or error and ignores everything else.

last returns an Observable that emits only the last item that’s emitted by the source Observable or the last one that meets the condition in the predicate function if it’s specified.

Categories
JavaScript Rxjs

Rxjs Filtering Operators — Distinctness

Rxjs is a library for doing reactive programming. Creation operators are useful for generating data from various data sources to be subscribed to by Observers.

In this article, we’ll look at some filtering operators, including the distinct , distinctUntilChanged , and distinctUntilKeyChanged operators.

distinct

The distinct operator emits the items from the source Observable that are distinct in comparison to previous items from the source.

It takes 2 optional arguments. The first is the keySelector function, which lets us select which value we want to check as distinct.

The second is an optional flushes Observable for flushing the internal HashSet from the operator.

It returns a new Observable that emits values that are distinct.

A simple example would be the following:

import { of } from "rxjs";  
import { distinct } from "rxjs/operators";
of(3, 3, 3, 3, 3, 3, 35, 5, 7, 8, 4, 6, 3, 5, 2, 4, 2)  
  .pipe(distinct())  
  .subscribe(x => console.log(x));

We have the following Observable with duplicate values:

of(3, 3, 3, 3, 3, 3, 35, 5, 7, 8, 4, 6, 3, 5, 2, 4, 2)

The values from it is pipe d to the distinct() operator to filter out duplicate values.

Then we get:

3  
35  
5  
7  
8  
4  
6  
2

from the console.log .

We can also check if some key of an entry is distinct as follows:

import { of } from "rxjs";  
import { distinct } from "rxjs/operators";

const people = [  
  { age: 4, name: "Joe" },  
  { age: 7, name: "Jane" },  
  { age: 5, name: "Jane" }  
];

of(...people)  
  .pipe(distinct(p => p.name))  
  .subscribe(x => console.log(x));

The code above spreads the people array as the arguments of the of operator, which emits the objects in the people array. Then the emitted values are pipe d into the distinct operator, which selects the name property to check for distinctness.

Then only the objects with a different name value is emitted.

In the end, we get:

{age: 4, name: "Joe"}  
{age: 7, name: "Jane"}

As the Observable.

distinctUntilChanged

distinctUntilChanged emits all items emitted from the source Observable that are distinct by comparison from the previous item from the source.

It takes 2 optional arguments, which is a compare function to test if an item is distinct from the previous item. The second argument is the keySelector function to return the value of the key that we want to check.

A simple example would be as follows:

import { of } from "rxjs";  
import { distinctUntilChanged } from "rxjs/operators";
of(1, 1, 5, 5, 6, 7, 8, 8, 8, 8, 9)  
  .pipe(distinctUntilChanged())  
  .subscribe(x => console.log(x));

The values from the of(1, 1, 5, 5, 6, 7, 8, 8, 8, 8, 9) is pipe d to the distinctUntilChanged operator and the previously emitted value is checked against the currently emitted value to see if they’re the same.

Then we get:

1  
5  
6  
7  
8  
9

since the value that’s different from the previously emitted one is emitted.

For Observables that emit objects, we can check if the property’s value is considered the same by passing in a function to the distinctUntilChanged operator as follows:

import { of } from "rxjs";  
import { distinctUntilChanged } from "rxjs/operators";  
const people = [  
  { age: 4, name: "Joe" },  
  { age: 7, name: "Jane" },  
  { age: 5, name: "Jane" }  
];  
of(...people)  
  .pipe(distinctUntilChanged((p, q) => p.name === q.name))  
  .subscribe(x => console.log(x));

The first and last parts work like the previous example. The difference is that now we have the (p, q) => p.name === q.name function to check if the previously emitted name value of the emitted object is the same as the currently emitted one.

Then we get:

{age: 4, name: "Joe"}  
{age: 7, name: "Jane"}

as the output from console.log .

distinctUntilKeyChanged

distinctUntilKeyChanged returns an Observable that emits the value of a source Observable that’s distinct by the comparison with a key of the object emitted previously from the source.

This means that an item will be emitted if the value with the given key is different from the previously emitted object key’s value.

It takes up to 2 arguments. The first is the key , which is a string with the object property to look up for each item.

The second is an optional compare function, which is called to test if an item is distinct from the previously emitted item from the source Observable.

It returns an Observable that emits item from the source Observable with distinct property value from the previously emitted one from the source.

For example, we can rewrite the previous example:

import { of } from "rxjs";  
import { distinctUntilChanged } from "rxjs/operators";  
const people = [  
  { age: 4, name: "Joe" },  
  { age: 7, name: "Jane" },  
  { age: 5, name: "Jane" }  
];  
of(...people)  
  .pipe(distinctUntilChanged((p, q) => p.name === q.name))  
  .subscribe(x => console.log(x));

into:

import { of } from "rxjs";  
import { distinctUntilKeyChanged } from "rxjs/operators";  
const people = [  
  { age: 4, name: "Joe" },  
  { age: 7, name: "Jane" },  
  { age: 5, name: "Jane" }  
];  
of(...people)  
  .pipe(distinctUntilKeyChanged("name"))  
  .subscribe(x => console.log(x));

Then we should get the same result as before. All we did was changing:

distinctUntilChanged((p, q) => p.name === q.name)

to:

distinctUntilKeyChanged("name")

We can use the distinct operator to get the distinct values emitted from a source Observable either by comparing primitive values or values of the properties of an object.

distinctUntilChanged , and distinctUntilKeyChanged let us emit the items from a source Observable that are different from the ones previously emitted by the source Observable. Again, it can compare by the primitive values or the values of the properties of an object.