Node.js Express JSONPlaceholder API Example to Fetch Data Using Axios & Display it Using Handlebars in Browser

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

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")
})

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

<!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>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<table>

<thead>

<tr>

<th>Title</th>

</tr>

</thead>

<tbody>

<tr>

<td>{{title}}</td>

</tr>

</tbody>

</table>

</body>

</html>