Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on January 30, 2023

 

 

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

 

 

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

 

 

 

 

Recent Posts

  • Android Java Project to Merge Multiple PDF Documents From Gallery Using iTextPDF Library
  • Android Java Project to Detect System Hardware & System CPU Info & Display inside TextView Widget
  • Android Java Project to Integrate Google OAuth2 Login & Logout System & Save User Info in SharedPreferences
  • Android Java Project to Export Raw Text to PDF Document Using iTextPDF Library
  • Android Java Project to Export Images From Gallery to PDF Document Using iTextPDF Library
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme