How to save data from javascript to database

I have a table as you can see in the Link here: //csgo.nssgaming.com/index.php This is a list with data there is automatic updated, but instead of outputting this information in a table, i would like to have it into a database. but i have no idea how to do it, when it is in javascript. so i would be happy if someone could tell me what to do or show a example.

you can see the code here:

    csgolounge-api example
    
    


    

        

            
                

                    

                        lel
                    
                
            
            

                

                    

                        Matches
                        
                                    Team_1
                                    Team_2
                                    Time
                                    Status
                                    Link->csgolounge
                                
                    
                
            
        
    

    
    
    
        function sortTable[table, order] {
            var asc   = order === 'asc',
                tbody = table.find['tbody'];

            tbody.find['tr'].sort[function[a, b] {
                if [asc] return $['td:last', a].text[].localeCompare[$['td:last', b].text[]];
                else return $['td:last', b].text[].localeCompare[$['td:last', a].text[]];
            }].appendTo[tbody];
        }

        $.getJSON["./api.php", function[data] {
            $.each[data, function[key, val] {
                var live, time, team_1, team_2

                live = val.live
                time = val.time
                team_1 = val.teams[0].name + " [" + val.teams[0].percent + "]"
                team_2 = val.teams[1].name + " [" + val.teams[1].percent + "]"
                link = key
                status = live ? "Live" : ""

                if[val.result]
                    if[val.result.status == "won"]
                        if[val.result.team == 0] team_1 += " [won]"
                        else team_2 += " [won]"

                $["tbody"].html[$["tbody"].html[] + "" + team_1 + "" + team_2 + "" + time + "" + status + "" + link + ""]
                }];

            sortTable[$['table'],'desc'];
        }];
    

Whenever we are using Javascript to program, one of the first things that we sort of want to achieve is some sort of "persistance". A way that we can use in order to save the information that we have and access it later . Let's get to work on how to do this , since there are several ways that we can use in order to store information in our system. In order to do this, we are going to be using node.js​ , so if you haven't yet installed node in your system, be ready to download their latest package / install file from their official website before you start coding.

Note for developers:

The scope of this tutorial is going to be to try to use object oriented paradigms whenever possible. This tutorial will not be focusing on using react or angular to  call any endpoints full of data. It is more rather oriented into using javascript in your back-end server.

I want to be very clear on this. If you ever use this tutorial in a front-end client, you will be doing it wrong. This tutorial is only set and thought for back-end programming in Javascript. We will cover how to correctly use this tutorial to interact with your front-end framework. Now, hold on there, I'm not saying that accessing a database from your front-end is always a bad idea. There are many ways that you can do that too and google offers good software services like firebase that allows you to safely interact with data and identified and registered clients in your network.. The only thing I want to be clear about is that this is not one of them.​

We will be using express js and node js to create a small web endpoint from which we will be working. I always like to program like this, since it helps me have a clear view that at the end of the day, we are creating an endpoint that is modular and independent.

EXPRESS TO WORK AS A WEB ENDPOINT

We will be using express in our small project. Navigate to any folder you are going to work in and type npm init  , after answering all of the questions, execute npm install express. Don't copy this file just yet,​ we will be using another one further in the tutorial.

This part of the code will be the responsible of listening to client petitions.  Right now we are simply using express.js to handle the requests and it's not finished [wait before you copy] . If you've never used express before, express is a small javascript framework that creates a small web server it's very simple to use [lines 2 & 3 to load it] from a simple object that takes care of pretty much everything.  I love it, i find it one of the best frameworks I've ever used in javascript because it's simple, its easy to use and very intuitive. It is very helpful for small projects where you don't need to overengineer a routing system or any advanced routing modules...

Express allows us to create endpoints that we will access via //localserver[or ip or machine or whatever you have]/route-name .  ​Now copy the following into driver.js. We will be using this file in a minute.

By now if you don't see the bigger picture of how this is going to work, maybe go out for a walk, relax and chill. This is basically the skeleton we will use to work. We will be working in each one of the functions independently.

Regarding the connection object

In this example. we suppose that the server will be online receiving petitions constantly, so we create a con object in the constructor of the Driver class, and then reuse it over and over, rather than creating a conn object every single time. If the connection is broken at some point, then we would need to reset the connection, but this is only going to be a test so we will not cover that in this tutorial.

[OPTIONAL] USING NODEMON TO REFRESH NODE EVERY TIME

Running node app.js by hand every time we make a change to our code is going to get a bit tedious and annoying, so let’s automate that. This part isn’t necessary to follow along with the rest of the tutorial, but will certainly save you some keystrokes.

Let’s start off by installing a the nodemon package. This is a tool that automatically restarts a Node application when file changes in a directory are detected:

npm install --save-dev nodemon

Now run ./node_modules/.bin/nodemon driver.js and make a change to driver.js. nodemon should detect the change and restart the app.

Using SQL to STORE DATA FROM A JS OBJECT

As a programmer, you will be tempted to using MYSQL and/or other SQL systems in order to properly save the data. What Mysql does is pretty much open a connector which you can use to execute SQL instructions.

First things first, if we are going to use MYSQL, we will need to download and install the library in our node. In our terminal, simply navigate to wherever you are going to be working and execute the command "npm install mysql" , which will install mysql in your project folder.

There are many ways that you can use to setup an SQL environment to test and work. If you haven't got an SQL server installed or endpoint to work with,  check out our tutorial on how to get PHP, SQL and APACHE running in your computer with Docker.

Don't feel good or bad. SQL is a very common and widespread markup language that allows for building many things so this is a setup you might actually use at some point in development. Let's create two files. index.js will take care of the endpoint service and how to deal with  client calls. Driver.js on the other hand, will act as a sort of "middleware" between our endpoint and our database. This small distinction will help us keep the code tidy and organised.

Lets go and inspect our first connection, let's check how this looks like.

One of the reasons why I don't like to use mysql is the mixing ' and "s everywhere in line 3.  It also opens up to sql injection exploits and hacks. 

Also take into account that we return the results based on what the response of the sql database is. If there is a change in the database, we will not be informed or told, the error will pass. along to the next level [like for example, the frontend]. 

Data returned from the MySQL database can be parsed by simply looping over the rows object. 

Regarding lambda functions

If you are not familiar with lambda functions here is a little tip. {row} is the object  that resolves from the code inside the lambda function. You can call it row or any way you wish, as long as they coincide before and after the =>. The object that really resolves to {row} is the item from the array that is recursing in the [foreach] and you can call it however you want.

UPDATING data

if you are not using nodemon already, execute node driver.js and check the results. You can fiddle with it until you understand what the code is doing. I want you to check one small thing i've done for you to recap. If you check the console.log file. I am printing out the results that I inserted rather than the results that the system gave to me. I'm using the "client" object to take care of printing the results rather than the information from the results object returned.... Why do you think I'm doing this?  Is this a good or a bad thing? What possible advantages and disadvantages do you find in this design?  Place your opinions in the comments at the end of the article!

The next thing we are going to do is to update data and information. If you check this query, you can easily check how many rows have been affected by the update query.

Lets head up to the code and create a new function to update clients in our driver script.

We will also update the last lines of our code so our script will reflect all of these changes and we can explain what is going on

Wait a minute, something is wrong...

Check again. When you update the client name, the result alters the client object and it changes all of the results. How can this be happening? Why is the first call also being changed by the name change?

This error comes from the fact of how Javascript works and how Javascript interacts with variables in this very script.  And understanding what's going on will pretty much mean that you know how javascript works and why it is failing.

 TIP: the main concept behind javascript is that the code itself is meant to be asynchronous... Try to find out why this happens before reading the answer.

AND THE ANSWER IS WRONG

We have assumed that code in Javascript normally executes in a programatic synchronous way when the truth is that it isn't. Javascript internally works with promises with their functions. When you call the storeclient controller, you are not executing the code until the query is finished. This means that the javascript code still has to fetch for the information from the database server and until it has reached it, rather than halting the code, it returns a "promise", meaning that when the javascript code has connected succesfully with the mysql driver, sent the query, received it, checked for any errors and returned the response, the code will trigger the function that you leave behind [in this case, the one inside the query]. This has to do with callback_functions and it's the very basic of how javascript works.

While it may not look like it, the statement client.name = "Paul" is indeed happening before the database is altered, and since we are not controlling the output in our console.log, the console is printing out the name that we already altered.

We are not having a correct mapping between our front-end variables, and their instances in our back-end. This is a very common rookie mistake and one that I've seen many times repeated in junior profiles.

If we are to use an object to encapsulate all of the actions you can do with it, then we have to always keep in sync the information. Let's check this implementation.

Now, a few things have changed here. First of all we have delegated the item creation to the Client itself, and there is no driver now... the Client is the driver now. It acts as a driver for itself and extracts and takes care of it's own data. If we create a data object using this representation, then we must take into account this whole object oriented consideration.

The downside of this situation is that we are creating multiple connection instances per client object, They must be closed separately.

Take attention to the fact that in this design I have to add a client before committing. This is just an example so you have an example of a database interation. In normal situations, commiting and adding should be the same thing. In this case however, what I want to show you is the different CRUD operations [create, read, update, delete] you can do. 

Also check the set timeouts that we have used to build this solution. This is just a temporary thing to remove the problem of synchronous and asynchronous code. On a day to day basis, these actions will be done separately so they are just here for testing purposes [if we don't wait, then the object doen't "refresh" properly, so we must wait for it].

The idea behind this system is to include Mysql inside of an object oriented construction within a javascript framework.  Execute the code via node driver.js  and fiddle with the syncing. Can you see what happens? 

Homework for you guys if you want... ¿Can you create the delete​ method ?

Using MongoDB

MongoDB is another object oriented database that we can use in Javascript. If you have little or no experience with MongoDB then I suggest you google a little bit about how MongoDB works before returning here. 

One that I'm liking more and more every day. In order to use mongodb we have two different possibilities:

If we have docker setup, we can set up a docker mongo image by using the command:

docker run --name some-mongo -d mongo:latest

This is a small command that will pull a mongo image and start it in our docker machine that we can access to. Beware, the data we use in this image will not be persistent.

​You can also install mongodb in your machine from their download site and start your own local server.

As a last resource, you can use the free database that mongo gives to users with their Mongo Cloud Atlas service [this is what I'll be doing for this tutorial]. I recommend you check this too so you get used to web software database services and their pros. To start , simply login or register their website and create a new starter cluster

Follow their instructions in configuration to what will suit your needs. Regarding Users, we will also need to create a user that has access to this cluster

We will finally need to set up the security parameters, click "connect" in your dashboard and follow the instructions on screen. Make sure that you whitelist your ip so you have access to your cluster. Remember that normally your ISP changes the IP, so you'll have to change this. You can keep this off if you wish and if you only want to test and learn.

When you reach the connect tab, simply close it off [we are already connecting to the cluster via our own javascript].  You can also connect to it using Mongo Compass. If you haven't met Mongo Compass yet, Mongo Compass allows you to connect and explore mongo databases. It is a very comfortable tool that I recommend you to take a look if you haven't done so before yet.

Next, install the mongodb library by  running the following command.

npm install mongodb --save

This will install the mongo modules into your machine.

Get your cluster’s connection info

The final step is to prep your cluster for connection. In Atlas, navigate to your cluster and click CONNECT.

The Cluster Connection Wizard will appear and prompt you to whitelist your current IP address and create a MongoDB user if you haven’t already done so. Be sure to note the username and password you use for the new MongoDB user as you’ll need them in a later step.

Next, the Wizard will prompt you to choose a connection method. Select Connect Your Application. When the Wizard prompts you to select your driver version, select Node.js and 3.0 or later. 

Copy the provided connection string in the form of const uri = "mongodb+srv://:@/test?retryWrites=true&w=majority";. That connection string will be the string that we use to connect to our cluster. For more details on how to access the Connection Wizard and complete the steps described above, see the official documentation.

As a final step, we now need to create a database in our server. If you don't know how to do this, simply download and install Mongo Compass.  If you copy your URI and open the program, it will automatically copy all of the data connections and connect you in.

Now, we are going to substitute the whole database system into mongo. Check this new version. Backup the previous driver.js and change its contents with this.

Take a look at how it behaves now. The service is feeding from the database. Notice that when we retrieve , the ID that we pass is one that the server has already previously generated by the mongo DB Service.  We must obtain this id that the mongo server generates and populate our client object with it so that it "stays in sync" with the server data at all times. 

This is important to know because, just like in mysql/mariadb, whenever you create an object in database, you don't need to introduce an ID since both systems [sql and mongo] will auto generate this id for you.

Let's take a look at line 48:

Creating the webservice

Up until now we have been focusing on the db connection part of this tutorial, however now we need to take a look at the webservice part. This will again be pretty straight forward but there are a couple of things that you'll need to have set in mind. For starters, we will now load the index.js file we created before and we will be using nodemon as we described before to work more comfortably.

In order to test our endpoint, we are going to be using Postman. Postman is a very useful tool to test endpoints. You can also use Curl if you are more of a terminal fanatic, but for the time being we will be using Postman.

Lets head to our driver.js file first. We need to remove all of the lines in the file that we've been placing up until the end of the class definition and leave only the following two:

var client = new Client[];

module.exports = client;

The driver file, corrected should look like this [remember to change your own URI for your own mongo server]:

We define an object [Client] through a class. Then we instanciate that class in a variable and export it via module.exports so that any other module that imports it can have access to the functionality given by our script. Let's take a look at the index.js now. [remember to execute npm install express  and after that  npm install body-parser] ​

Now, the imports at the beginning are parts of the parsers that we are going to be using to read and write the json data from our petitions.  Let's check what's going on in each one of the functions that we have. 

/clients/new

We take the name and the address, fit the information inside of the client object and add it to the database. 

/clients/get

This one is a bit trickier since we have to fight a little bit against the conception of Javascript and promises to properly understand what's going on here. You need to head off to  the retrieve method inside of the driver where almost everything is going on

Notice that we are waiting for the mongo client to connect using the await reserved keyword [hence why since we need to wait, the function must be async.  We need mongo to finish the connection process before we start doing stuff . Once we are in we need to find the object based on it's id [ line 11 in the snipped code above].   But this will take some time and we cannot expect the collection  object to take care of the response.   The function is asyncronous so it's going to take it's time and the code in the node.js will not stop.  

The findOne method uses as input a callback method that will callback once the actions have ended. So what we do is we pass on the response object from the controller and when the database is done finding the object, our middleware [Driver.js] will take care of handling the response back. 

It's not so elegant in my opinion, but bear in mind that we cannot block the main process and make it wait until the response is finished.

/clients/commit

This method is similar to the previous new method since we do not need to wait for the information to be settled.

Regarding errors -> Homework

I want to add up that this example is just trying to show how to connect data to the mysql / mongo db as a way to illustrate how to settle it and have it done. However, there are many cases that i am not contemplating in this code. What happens if the server is given a non existing id? This kind of cases must also be contemplated and your server must return appropiate and logical responses and errors when contemplated. I haven't contemplated many of these cases because i'm out of time writing down this tutorial :[ [sorry guys] but beware of the responses that may arise for each case.

To simulate [and test] the system we are going to use Postman. If you haven't used postman, i'll try to brief you with a small description again: Postman is gui curl.  It's used to simulate petitions to servers via post and get. Download the program for your pc from their official website.

How to test

If you are not going to use curl and want to learn how to use Postman. Download and install the program. Once you have postman installed. fire it up and create a new request

Now, fill in the data as shown in the following picture to test the adding a new client. Make sure that you are checking the boxes and filling in the info inside of the Params tab. Also, make sure that the port is set correctly. In my case, the url is ​localhost:300/clients/new 

Hit send and check the server response as well as your database. You can use this to test both MYSQL and MONGODB  endpoints and see what the server responds. This is a small introduction to how you can do webservices  easily using Javascript.

Again, bear in mind i've tried to keep this very short, so I'm not introducing many concepts such as error-checking or how to properly architect your system . But this may give you a small idea if you are a bit lost into how to make it happen.

I hope this article is of use to you. Fair coding!

Our reader's favorite picks

Subscribe to our newsletter

Let us send you spam from time to time. Yes, it is a bit of Spam, but interesting Spam, supreme quality spam to be honest!

Can you connect JavaScript to database?

Can you build a database with JavaScript?

How do I transfer data from API to database?