Fetch API: Send data from front-end to back-end

Leave a Comment / JS / By Salma Aboumerouane / October 21, 2022 October 28, 2022

And on the browser it will look like this:

2)-Step 2: Specify where to send the data

Now that we have created the HTML file with the inputs in it, it is time to tell the browser where to send the data once the user fills in the inputs.

In other words, let’s say I’m the user and I will add my name, my email and my city. So once I add these elements and click on the “send data” button, where will the browser send the data?

To do that we’ll add what we call routing. The routing is simply the route the browser will send the data to.

And we can choose any route we want. For example here, I will tell the browser to send data to the /api URL. We can tell the browser to send data to any URL we want, /soccer for example or /basketball or /nature…. Choose any name you want it does not matter.

To do that first let’s select our input elements one by one and our button in JavaScript. So we’ll add a script tag with the following code:

Then, let’s add the routing or the URL we talked about and which is /api. So how to add it?

Simply by adding the fetch() syntax.

So the code will be:

Let’s take a closer look at the code.

the first line which is button.addEventlistener(“click”,()=>{}) tells the browser that at the click of the button, I want you to execute this instruction.

“button” is the element we selected before, “addEventListener” is here to add the event on which the button should behave once triggered, “click” is the type of event we want the button to listen to.

After that we created a variable which is obj because this variable will contain an object. This object is made of:

• The name of the user
• The email of the user
• The city of the user

To access the name or the email or the city of the user we have to access the value of the input element. Hence the syntax myName.value. “myName” is the input we selected and “value” is the value of the input.

So whenever we click the button, we want to create a variable that will contain the value of the inputs.

And then comes the fetch() syntax.

The fetch() method takes 2 arguments: the 1st argument is the URL where to send the data, and we said that the URL is /api. And the second argument is object made of:

• The method to be used to send the data, in this case we’ll use the “POST” method.
• The headers that determine the type of content that will be sent to the backend. So here we have an HTML content, but this HTML is transformed into JSON as the fetch API understands JSON and XML format only.
• The body, which in other words mean the data. When sending data to the server, the data has to be string. JSON.stringify() syntax converts the object to be sent to the backend into a string.

So the code in the HTML file becomes:

3)- Step 3: Create the .js file

Now that we’re finished with the front-end, it is time to code the back-end. We will use NODE JS for that.

Now let’s create an index.js file, and add express package to it.

To install express simply go to Node terminal and type npm install express.

the express package will allow us to create a server.

So to create a server with express it is very simple. All we have to do is to call the express package in the index.js file and specify a port to listen to.

So the code for that is:

The first line of the code “var express= require(“express”) calls the express package.

The second line “app=express()” creates one application that we will work with. Express module is a function and allows us to create as many applications as we want in a project. But for this one we’ll use only one application.

The third line “app.listen(3000)” allows the computer to listen to port 3000. We have many ports in the computer and we can choose another port if we want to. For example port 8080.

Now that we have created our server, it is time to add some routing.

First let’s display the HTML page from the backend. Or in other words, let’s let the backend serve the HTML page.

So the app.get() is here to handle GET methods. app.get() allows us to get the page we’re looking for, and the URL of the page we’re looking for it is up to us to define it.

For example here the URL of the page I’m looking for is “/”. You can choose any URL name you want, for example /home or /about or /contact…

app.get() takes 2 arguments:

• The route of the URL we want to get.
• A callback function that has 2 arguments: req and res. res is the response of the server.

And here as a response of the server, the server will send a file which is the index.html file. In other words, whenever we look for “/” URL the server will display the index.html file. But we have to specify where the index.html file is located.

In our case it is located in the root of the project in the directory name.

Now to display the html page from the backend simply go to Node terminal -> type node index.js -> then Go the browser -> In the search bar type 127.0.0.1:3000/ and voila…

If instead of “/” URL you chose “/contact” for example, in the search bar of the browser you should type 127.0.0.1:3000/contact.

We’re almost finished. In the front-end we told our browser to send data to /api URL. But where is this /api URL? It is not defined anywhere right?

Well, /api URL will be added to the backend as well. Because we told the browser to send data to /api, but when it will be time to send data, we’ll have an error from the browser stating that it couldn’t find the /api URL we’re talking about. So in order for the browser to find /api URL, we’ll add the routing in the index.js file.

So here the app.post() method handles the post method from the front end. It takes 2 arguments:

• the /api URL which is where the data will be sent
• A callback function that has 2 arguments: req and res. req is for the request sent by the user. Which means send the data. res is the response of the server.

So here with the callback function we can display the body of the user’s request.

Let’s go to our browser now and fill in the inputs and send data to the back end:

Now let’s click on the send button to send data to the backend and see our server response:

After clicking on the send button, and going back to Node js terminal, we have this “undefined” message. Which means that our server did not understand the data we’re sending. But why?

Simply because if you remember, in the front-end, in the headers “Content-type” section, we said that the data is a JSON data. And express will not understand JSON data unless we mention it.

So to enable express to understand what we’re talking about we’ll add a small piece of code that is called a middleware.

Now let’s refresh the browser, fill in the inputs once again and click on the “Send” button and go back to Node JS terminal.

So now our data is sent to the backend.

4)- One more detail

There is one more detail to add regarding the front-end. Now that we are able to send data to the backend, if we want to receive a confirmation from the server that indeed it got the data, and we want this confirmation or message to appear on the front-end, we can add a code on the front end.

fetch() API is an asynchronous function. which means it returns a promise.

So in the front end, if we add a then() method to the fetch() syntax, it will return the response of the server. Let’s see that:

So here we added twice then() method. the first then() is to capture the server response in JSON format, and the second then() is to display this response in the console of the HTML page.

Now let’s tell the server to send its response. Let’s go to the backend and add the response.

So here the server will respond by saying: “It’s perfect, I received all the data”. The server response will be in JSON format.

Now let’s go back to the browser and refresh it, and then fill in the inputs with all the information once again and click on the “send” button.

You will notice that the data are sent to the back end. If you check Node JS terminal you will find it, but also in the front-end, in the console of the browser we’ll have:

Front end code:

<!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>Fetch API</title>

    <style>
        label{
            display:block;
            margin:20px;
        }
        
    </style>

    </head>

    <body>
        <label> Name:<input type="text" class="userName"/></label>
        <label>Email:<input type="email" class="userEmail"/></label>
        <label>City:<input type="text" class="userCity"/></label>
        <button>Send data</button>

        <script>

            var button=document.querySelector("button");
            var myName=document.querySelector(".userName");
            var myEmail=document.querySelector(".userEmail");
            var myCity=document.querySelector(".userCity");

            button.addEventListener("click",()=>{
                
            var obj={
                    name:myName.value,
                    email:myEmail.value,
                    city:myCity.value
                };
                fetch("/api",{
                method:"POST",
                headers:{
                    "Content-type":"application/json"
                },
                body:JSON.stringify(obj)
                }).then((r)=>r.json()).then((response)=>console.log(response));

            })
        </script>
    </body>
</html>

Back end code:

var express = require("express");
var app = express();

app.listen(3000);
app.use(express.json());

app.get("/", (req, res) => {
    res.sendFile("index.html", { root: __dirname });
})

app.post("/api", (req, res) => {
    console.log(req.body);
    res.json({
        massage: "It's perfect, I received all the data"
    });
})