Welcome folks today in this blog post we will be using the jsonplaceholder api
to fetch data using the axios
library and display it using handlebars
template view engine in browser. All the full source code of the application is shown below.
Get Started
In order to get started you need to initialize a new node.js
project using the below command as shown below
npm init -y
npm i express
npm i express-handlebars
npm i axios
And after that you will see the directory
structure of the node.js project as shown below
And now you need to make the index.js
file and copy paste the following code
index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
const express = require('express') const {engine} = require('express-handlebars') const axios = require('axios') const app = express() app.engine('.hbs',engine({ extname:'.hbs', defaultLayout:false, layoutsDir:'views' })) app.set('view engine','hbs') app.get('/',async(req,res) => { const {data} = await axios.get("https://jsonplaceholder.typicode.com/posts") res.render('index',{ posts:data }) }) app.listen(5000,() => { console.log("App is listening on port 5000") }) |
As you can see we are importing all the packages
at the top and then we are setting the middleware
and the view engine of the handlebars
and then we have the simple /
route and inside it we are making a simple http
request to the jsonplaceholder api and passing the data to the template
of the handlebars.
And now you need to create the views directory and inside it make a index.hbs
file and copy paste the following code
views/index.hbs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!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>Document</title> </head> <body> <table> <thead> <tr> <th>ID</th> <th>Title</th> <th>Body</th> </tr> </thead> <tbody> {{#each posts}} <tr> <td>{{id}}</td> <td>{{title}}</td> <td>{{body}}</td> </tr> {{/each}} </tbody> </table> </body> </html> |