Hi guys today we are going to dive into how I struggle to create a connection to the server from the JavaScript file of the web page to the server that is in NodeJS
What I was trying to achieve back then, was to send JSON data that contained the id of the button that the user clicked and send it to the server to look for the the item in the database with that same id
After hours of thinking I came across the fetch method, basically what it does is take an argument, then you add a path of the resource you want to fetch, then it returns a promise that resolves to the response of that request.
So here it is what I did, I added a fetch object inside a function that is called when the user clicks the button in my Javascript file (frontend) , so I started like this (this is just an example to check my full work you can go to my GitHub in the contact section).
var data = {
name: "Luis"
}
fetch("clicked", {
method: 'POST',
body: JSON.stringify(data),
headers : {
'Content-Type': 'application/json'
}
})
So as you can see what I found out is create an object and I name it data, and inside the data object is the value name that holds my name Luis, then create fetch with the origin or path "clicked", I set up the method as POST because we were sending data to the server, in the body part notice that we typed JSON.stringify that basically what is does is turn a JSON object to a Javascipt value and inside the parenthesis I placed the object that holds my name, after that we set up the headers value, in there we defined what is the content type and because is JSON I set it up as application/json, after all of this we need to add the promises.
fetch("clicked", {
method: 'POST',
body: JSON.stringify(data),
headers : {
'Content-Type': 'application/json'
}
})
.then(response => response.json() )
.catch(err => {
console.log(err);
});
The promises represent the completion of a asynchronous operation and the resulting value starting with .then to take the response and catch to check if there was any error on the operation.
Now what I did in my NodeJs file (server) was to add the following router.
app.post("clicked", (req, res) => {
var pro = (req.body.name);
console.log(pro);
});
Notice that the path is the router is the same as in the fetch and we set up a variable with the name of pro that makes a request , notice that we request body and inside that body is the object with the value of name that hold my name "Luis", and of course console.log it to make sure it retrieves need it value, and the MOST important think is that in order to make it work is to set up body parser that basically returns middle ware on your NodeJS, like this.
const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: false
}));
app.use(bodyParser.json());
The bodyParser.json returns middleware that only parses json and only looks at requests where the Content-Type header matches the type option, like how we set it up in the fetch object.
It was a pleasure to share what I learned to whatever person is reading, thank you and have a great day.