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 PUG Template Engine to Display Dynamic User Data in Table Using Axios & JSONPlaceholder API

Posted on January 30, 2023

 

 

Welcome folks today in this blog post we will be using the jsonplaceholder api to fetch user data using the axios library and display it in table using pug 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 pug

 

 

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
const express = require('express')
 
const pug = require('pug')
 
const axios = require('axios')
 
const app = express()
 
app.set('view engine','pug')
 
app.get('/',async(req,res) => {
    const {data} = await axios.get("https://jsonplaceholder.typicode.com/users")
 
    res.render('index',{
        users: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 pug and then we have the simple / route and inside it we are making a simple http request to the jsonplaceholder api and passing the user data to the template of the pug template engine.

 

And now you need to create the views directory and inside it make a index.pug file and copy paste the following code

 

 

views/index.pug

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
table
    thead
        tr
          th Name
          th Username
          th Email
          th City
    tbody
        each user in users
          tr
            td= user.name
            td= user.username
            td= user.email
            td= user.address.city

 

 

 

 

Recent Posts

  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • Android Kotlin Project to Load Image From URL into ImageView Widget
  • Android Java Project to Make HTTP Call to JSONPlaceholder API and Display Data in RecyclerView Using GSON & Volley Library
  • Android Java Project to Download Youtube Video Thumbnail From URL & Save it inside SD Card
  • Android Java Project to Embed Google Maps & Add Markers Using Maps SDK
  • 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