Work with CouchDB using the example of the Todo List JavaScript application

At some point I had to work with one of the document-oriented DBMS, Apache CouchDB, but I had difficulty finding documentation. In this article I want to talk about how to work in this database from JavaScript using the example of a small application “Todo List”. Since the article is focused on ApacheCouchDB - I will not show and talk about how the application works to the full.

Model

The principle of operation of this application is as follows:

1. When the page loads, send a request to the database server.
2. We receive from it JSON structure.
3. Pars it on the page.
4. Add any entries as needed ...
5. When you click on the "Save" button, write the data to the database.

All page content is stored as follows:
')

model = { items: [ { _id: 1, date: "11.11.11", name: "  1", does:[{ check : 'true', name : ' 1', time : '00:00' }] } { _id: 2, date: "11.11.11", name: "  2 ", does:[{ check : 'true', name : ' 2 ', time : '00:00' }] } ] } 

Each of the elements of items contains a sheet that includes a to-do list; in the example above, each list contains one item (does).

So we have a model for data storage. The next step is to work directly with the DBMS.

Install CouchDB

The easiest way to install CouchDB is to go to the site and download the installation distribution for your operating system.

Health check
After installing CouchDB, you need to check it for operability, for this you need to go to: 127.0.0.1 : 5984. Making sure that in response you received the following:



You can proceed to the next step.

Control Panel

The CouchDB control panel is operated using the Futon interface, which can be accessed by entering the following address in your browser’s address bar: 127.0.0.1 : 5984 / _utils

If everything is correct, a control panel will appear in front of you (in version 2.xx, the control panel looks different).



Click the “Create Database” button and enter the name of our database in the field.



Everything, on this our base is created, the next step will be the interaction with this base specifically from the application.

Interaction with the database from the application

I wrote the functional part of the application, without connecting to the database, that is, it works offline, after reloading the page, all data is erased. We need to implement the recording of the created data in the database, and extracting them from there when downloading the application.
Having combed the official documentation, I found a plugin written for pure JavaScript, as well as for jQuery. I decided to use jQueryPlugin.

It is located in the CouchDB assembly that we downloaded, you can find it at 127.0.0.1 : 5984 / _utils / script / jquery.couch.js

Writing data to the database

After the application creates a model of our data, we need to write them to the database. The first step is to specify the host and port of the database:

 $.couch.urlPrefix = "http://localhost:5984"; 

To access the database, use the following function

 $.couch.db(“todo_model”).method 

We need a saveDoc method - which overwrites the document in the database if it has the same id as the document at the entrance and creates a new one if the id does not match any of the existing ones.

Next, you need to cycle through each element of the application model, and write it into the database.

 for(var i = 0; i < $scope.list.items.length; i++){ var doc = $scope.list.items[i]; doc._id = String(doc._id); $.couch.db("todo_model").saveDoc(doc, { success: function(data) { console.log(data); }, error: function(status) { console.log(status); } }); } 

* The application was built using the framework AngularJS. For real purposes, it is not recommended to use AngularJS and JQuery in conjunction.

Documents appeared in the database, which are stored in JSON format.



Thus, using the JQueryCouchDB plugin, you can easily write data to the database. You can also get them from there, but I decided to show a slightly different way that you can use without connecting any third-party plug-ins.

HTTP request to CouchDB

When I load the page, I send a request to the server where our database is located, in response, I receive a JSON structure with the necessary data:

  $http.get('http://127.0.0.1:5984/todo_model/_all_docs').then(function(response){ //    $scope.model_len = response.data.rows.length //    for (var i = 0; i < $scope.model_len; i++) { var p = response.data.rows[i].id //  id   $http.get('http://127.0.0.1:5984/todo_model/' + p ).then(function(data){ //       id model.items.push(data.data) }); } }); 

I get all the elements, for fixing their number, after which I “push” each element into the model.

Conclusion

There is little documentation on this DBMS, I showed one of the way to work with it, and, I hope, helped someone.