Node JSPowerShell

Dynamically populate data for drop down list using PUG in Node JS

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 !

Leave a Reply

Your email address will not be published. Required fields are marked *