Let me keep this blog simple and easy. All we need to achieve is to dynamically retrieve items in PUG drop down list. Here is the logic!
select(name='dropDown', id='')
each val in ['red' , 'green' , 'blue']
option=val
So, now let us create a data.json file – In my case it’s like below
{
"FirstName": "Chendrayan",
"LastName": "Venkatesan",
"Skills": [
"PowerShell",
"Python",
"Node JS",
"SharePoint",
"Office 365"
]
}
For our demo let’s list the Skills in drop down list
Sample Code is here
doctype html
style.
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
h3 Choose Your Skill
div
form(action='/SkillOpted' method="post")
label(for='skillOpt') Skills
select(name='dropDown', id='')
each skill in Skills
option=skill
input(type='submit', value='Submit')
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
meta(http-equiv="X-UA-Compatible", content="ie=edge")
title Document
body
h1 Your option is #{skill}
Server.JS
var express = require('express'),
app = express(),
pug = require('pug'),
spawn = require('child_process').spawn, child,
data = require('./data/data.json'),
path = require('path'),
bodyparser = require('body-parser');
app.use(bodyparser.urlencoded({ extended: true }));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.get("/", function (request, response) {
response.render('dropdowndemo', {
Skills: data['Skills'],
})
});
app.post("/SkillOpted" , function(request, response){
response.render('SkillOpted',{
skill: request.body.dropDown
})
})
app.get("")
app.listen(3000)
console.log("Your application is running in port 3000")
In my next blog I will show the real time application demo using PowerShell !