How do I get input value from post.ejs

Question

app.js

var express = require('express');
var bodyParser = require('body-parser');
var app = express();
var passport = require('passport');
var localStrategy = require('passport-local');
var axios = require("axios");

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

const KEY = "<key>";

app.use(require('express-session')({
    secret: "this is Blogme session",
    resave: false,
    saveUninitialized: false
}));

app.get("/post", (req, res) => {
    res.render("main/post.ejs")
})

app.get('/result', async function(req, res){
    const { search } = req.params

    const response = await axios.get('https://www.googleapis.com/youtube/v3/search',{
        params:{
            q: { search } ,
            part: "snippet",
            maxResults: 32,
            key: KEY,
        }
    })
    .catch(err => console.log(err))

    res.render("main/eg.ejs", { response: response})
})
app.listen(process.env.PORT || 3000, process.env.IP, function(){
    console.log("server has started");
})

eg,ejs

<html>
    <head>
        <title>Youtube Videos</title>
    </head>
    <body>
        <div class="ui secondary pointing menu" style="height: 60px; align-items: center;">
            <a class="active item">
              Home
            </a>
            <a class="item">
              Messages
            </a>
            <a class="item">
              Friends
            </a>
          </div>
        <div class="container">
            <div class="row">
                <% for(i=0;i<response.data.items.length;i++){ %>
                <div class="col-md-3" style="display: flex; align-items: center; padding: 30px;">
                    <div>
                        <img src="<%= response.data.items[i].snippet.thumbnails.default.url %>" 
                         alt="" style="width: 80%;"/>
                        <button class="btn btn-primary" style="width: 80%; margin-top: 10px;">Watch 
                         Now</button>
                    </div>
                </div>
                <% } %>
            </div>
        </div>
    </body>
</html>

post.ejs

<html>
    <body>
        <form action="/result" method="GET">
            <input type="text" name="search" placeholder="Search videos" />
            <button>Submit</button>
        </form>
    </body>
</html>

(node:12752) UnhandledPromiseRejectionWarning: TypeError: Cannot destructure property 'search' of 'req.body.search' as it is undefined. at C:\BlogMe\app.js:46:13 at Layer.handle [as handle_request] (C:\BlogMe\node_modules\express\lib\router\layer.js:95:5) at next (C:\BlogMe\node_modules\express\lib\router\route.js:137:13) at Route.dispatch (C:\BlogMe\node_modules\express\lib\router\route.js:112:3) at Layer.handle [as handle_request] (C:\BlogMe\node_modules\express\lib\router\layer.js:95:5) at C:\BlogMe\node_modules\express\lib\router\index.js:281:22 at Function.process_params (C:\BlogMe\node_modules\express\lib\router\index.js:335:12) at next (C:\BlogMe\node_modules\express\lib\router\index.js:275:10) at SessionStrategy.strategy.pass (C:\BlogMe\node_modules\passport\lib\middleware\authenticate.js:343:9) at SessionStrategy.authenticate (C:\BlogMe\node_modules\passport\lib\strategies\session.js:75:10) at attempt (C:\BlogMe\node_modules\passport\lib\middleware\authenticate.js:366:16) at authenticate (C:\BlogMe\node_modules\passport\lib\middleware\authenticate.js:367:7) at Layer.handle [as handle_request] (C:\BlogMe\node_modules\express\lib\router\layer.js:95:5) at trim_prefix (C:\BlogMe\node_modules\express\lib\router\index.js:317:13) at C:\BlogMe\node_modules\express\lib\router\index.js:284:7 at Function.process_params (C:\BlogMe\node_modules\express\lib\router\index.js:335:12) (node:12752) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 14)

eol eol · Accepted Answer · 2020-10-18T16:44:06

Since you're submitting the form with the method GET, the search parameter will be appended to the url as a query string. Express allows you to access those parameters through req.query. So instead of req.params (which you would use for path/url parameters), you should use:

app.get('/result', async function(req, res){
    const { search } = req.query;
    // ...
}

How do I get input value from post.ejs

1 Answers