Being able to parse a payload given to a node.js back end typically via a post request is a very common task when doing something with express.js. As such there is a built in way to quickly do this thanks to the body-parser module that is included with every express.js install. In order to get into body parsing it is necessary to put together at least a basic full stack application. So in this post I will be giving a an example that will include both front and back end code. However this is a post mainly on req.body, and how to parse that using the body parser module so I will be mostly covering that.
If you want to learn more about using routers in express.js you might want to check out my post on express.js routers. It is a great way of keeping things more organized when it comes to defining the paths that compose your application.
If you wish to lean more about setting up static paths used express.js, I have a post on express.static that you might want to check out.
In the routes folder I have a json.js file that will serve as an example of using the body parser to parse json given from a client system via a post request. This file will be used in my main app.js file at the root of the project folder to create a json path by mounting what I am doing inside this file to a json path there in app.js.
This is what will be used to define my text path in the main app.js. It is very similar to my json.js file only I am using the body-parser to parse incoming posts that are just plain text, rather than json.
In my http.js file I have my own http client that I use as my own vanilla js solution for scripting http. In a more advanced project where the focus is not just on body parsing in express.js I might choose to use axios, or $http in angular.js if making a MEAN stack application.
This solution is what I ended up with when just directly working with the tired yet true XMLHttpRequest for scripting http. This is not something that I would use in production code, for that it may be best to stick to something more professional. I have writing posts on XMLHttpRequest, axios, and fetch. In angular.js there is also of course the $http service as well, choose your solutions for scripting http accordingly depending on the project.
I also parked a simple function that wraps document.getElementById in a file called getid.js. It has been a practice that I have been doing for ages when doing anything vanilla js style. It may be more appropriate to place it elsewhere, but I decided to just park it there. In a more advanced project I might use some other means of gaining references to DOM elements, with many font end frameworks there are many ways of keeping these calls more concise compared to typing document.getElementById over and over again.
This is a total coding style thing thats about it.
This is the client script that I use in conjunction with my /json path defined in my json.js file that I am using in my routes folder. I am using my getId method which is just a method that wraps document.getElementById to gain a reference to an input element in my ejs templates, and add an event hadler to it that uses my http method to make a post request to the json path.
This post is about express.js body parser so I want to keep this simple. So just having a front end that makes a simple post request to a path will work for the sake of the scope of this post.
Another script that makes a post request to one of my express.js powered back end scripts. This one just makes a plain text post rather than a json post. If you look at my http method you will see that by default the built in beforeSend method will convert what I give via the payload property to json. If for some reason I want to do something different than that I can do so by overwriting the beforeSend method with a method that sets the proper headers for what I want to send.
In most cases JSON will work just fine, I just wanted to have some additional front end code that exercises other aspects of the express body parser.
In this demo I am using a views folder for ejs templates. I often prefer to use ejs in place of just simple static html in the public folder.
With ejs it is possible to define partials that define reusable parts of html that can be used in more than one page. Rather than repeating navigation markup for each page, I can just define it once, and then inject that part into any additional page that is to use that markup. This helps to keep my html examples concise in these demos.
This is the only ejs partial I have made for this demo which is the navigation page.
These are the layouts for home, as well as the json, and text demos. The json and text layouts are almost the same aside from the fact that they grab different front end code in the static js folder mentioned before hand.
These layouts are used inside my index.ejs file, and which one that is used depends on which path I navigate to. If you look at my routes files mentioned above I also define what is to be done with get requests in the route files on top of just using body parser with post requests. In these get request handlers I am using res.render to render index.ejs, and am passing a layout property that is used to render the proper layout.
This is my main index.ejs file that is always used when rendering a page when responding to a get request. The layout of the page changes depending on the path because of the different get request handers passing different layout properties.
In the future if I update this post it will be to expand on the content that has to do with the body parser module itself, and maybe try to provide a more basic example of using body parser if possible, maybe with a simple static view.
This post covers the basics of what can become a serious full stack web application using node.js and express.js as a server side framework. In a serious project I would lose my vanilla js code, and use additional popular, well supported alternatives in place of it.
If you enjoyed this post you might want to check out some of my other posts on express.js