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