Node.js Express PUG Template Engine to Display Dynamic User Data in Table Using Axios & JSONPlaceholder API

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

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

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

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

table

thead

th Name

th Username

th Email

th City

tbody

each user in users

td= user.name

td= user.username

td= user.email

td= user.address.city