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!
|
1 2 3 |
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
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "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
|
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 30 31 32 33 34 35 36 37 |
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') |
|
1 2 3 4 5 6 7 8 9 |
<!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
|
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 |
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 !