The Error :
i have this error that prevent me to fetch data from the html form, every time i fill the form with values , and hit the button that will send the data to an API that save the data to the database this error appears:
Cannot read properties of undefined (reading 'location')
TypeError: Cannot read properties of undefined (reading 'location')
at /media/onour/Desing/Des/test/roshan/routes/index.js:71:14
at Layer.handle [as handle_request] (/media/onour/Desing/Des/test/roshan/node_modules/express/lib/router/layer.js:95:5)
at next (/media/onour/Desing/Des/test/roshan/node_modules/express/lib/router/route.js:137:13)
at /media/onour/Desing/Des/test/roshan/node_modules/connect-ensure-login/lib/ensureLoggedIn.js:50:5
at Layer.handle [as handle_request] (/media/onour/Desing/Des/test/roshan/node_modules/express/lib/router/layer.js:95:5)
at next (/media/onour/Desing/Des/test/roshan/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/media/onour/Desing/Des/test/roshan/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/media/onour/Desing/Des/test/roshan/node_modules/express/lib/router/layer.js:95:5)
at /media/onour/Desing/Des/test/roshan/node_modules/express/lib/router/index.js:281:22
at Function.process_params (/media/onour/Desing/Des/test/roshan/node_modules/express/lib/router/index.js:335:12)
at first i said to myself maybe it's caused by the middleware so i add the some middelware in my index.js file : index.ejs:
<form action="/addNewHouse" method="POST">
<input type="text" id="location" name="location" placeholder="Location" autocomplete="location" required>
<input type="text" id="for" name="for" placeholder="For" autocomplete="for" required>
<input type="hidden" name="_csrf" value="<%= csrfToken %>">
<input type="submit" value="Go">
</form>
index.js:
var express = require('express');
var ensureLogIn = require('connect-ensure-login').ensureLoggedIn;
var cookieParser = require('cookie-parser');
var csrf = require('csurf');
var db = require('../db');
const app = express();
app.use(csrf());
app.use(function(req, res, next) {
const token = req.csrfToken();
res.locals.csrfToken = token;
next();
}
);
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
var ensureLoggedIn = ensureLogIn();
function fetchTodos(req, res, next) {
db.all('SELECT rowid AS id, * FROM houses WHERE owner_id = ?', [
req.user.id,
req.user.first_name
], function(err, rows) {
if (err) { return next(err); }
var todos = rows.map(function(row) {
return {
id: row.id,
title: row.title,
completed: row.completed == 1 ? true : false,
url: '/' row.id
}
});
res.locals.todos = todos;
res.locals.activeCount = todos.filter(function(todo) { return !todo.completed; }).length;
res.locals.completedCount = todos.length - res.locals.activeCount;
next();
});
}
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
if (!req.user) { return res.render('home'); }
next();
}, fetchTodos, function(req, res, next) {
res.locals.filter = null;
res.render('index', { user: req.user });
});
/* GET THE LIST OF HOMES*/
router.get('/homes-list', (res,req) => {
const homeList = "SELECT * FROM home WHERE owner_id = ?";
db.all(homeList,[
req.user.id
],
(err , rows) =>{
if (err) {
return console.error(err.message);
}
res.render("index/#house-list" , {module: rows})
});
});
/*ADD NEW HOUSE*/
router.post('/addNewHouse', ensureLoggedIn ,(res,req , next) => {
// const loc = req.body.location;
// const toWhat = req.body.for;
const owner = 5;
db.run('INSERT INTO home (owner_id,Location,for) VALUE( ? , ? , ? )',[
owner,
req.body.location,
req.body.for
],
(err) => {
if (err) { return console.error(err.message.at)}
}),
res.render('index');
next();
});
// Get Sell Page
module.exports = router;
all i want is to get the data form the form and save in the database
index.ejs file from the top:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Account • <%= user.username %> | Roshan</title>
<link rel="stylesheet" href="/css/base.css">
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/app.css">
<link rel="shortcut icon" href="/img/favicon-0.png" type="image/png">
<script src="https://kit.fontawesome.com/8a7299c2d2.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<div >
<img src="/img/Roshan-Logo.png" alt="">
</div>
<input type="checkbox" name="check" id="check">
<label for="check">
<i ></i>
</label>
<div >
<label for="check">
<i ></i>
</label>
<li><a href="/logout">Logout</a></li>
<li><a href="/profile">Profile</a></li>
</div>
</nav>
<div >
<section>
<div >
<li><button ><a href="#house-list">My List</a></button></li>
<li><button ><a href="#buy">Buy</a></button></li>
<li><button ><a href="#rent">Rent</a></button></li>
<li><button ><a href="#sell">Sell</a></button></li>
</div>
<div id="house-list">
<h1>House List</h1>
<form action="#">
<input type="text" name="location" readonly>
<input type="text" name="space" readonly>
<input type="text" name="rooms" readonly>
<input type="text" name="status" readonly>
<input type="text" name="price" readonly>
</form>
</div>
<div id="buy">
<h1>Buy</h1>
</div>
<div id="rent">
<h1>rent</h1>
</div>
<div id="sell">
<h1>Add New House</h1>
<form action="/addNewHouse" method="POST">
<input type="text" id="location" name="location" placeholder="Location" autocomplete="location" required>
<input type="text" id="for" name="for" placeholder="For" autocomplete="for" required>
<input type="hidden" name="_csrf" value="<%= csrfToken %>">
<input type="submit" value="Go">
</form>
</div>
</section>
</div>
</body>
</html>
i hope you can help me
CodePudding user response：
You have swapped req and res in your route declarations:
router.get('/homes-list', (res,req) { … })
^^^^^^^ should be (req, res)
router.post('/addNewHouse', ensureLoggedIn ,(res,req , next) { … })
^^^^^^^ ditto