Please help, I am a beginner in NodeJS. I am creating a website where people can promote their virtual conferences and other people can see it. So I created a form with POST method, and then the data will be sent where it will be pushed into an array and then the array will be read by an EJS file. But this error is coming:-
TypeError: Cannot read property 'hostName' of undefined
This is my server.js
const express = require("express");
const ejs = require("ejs");
//create express app
const app = express();
app.set("view engine", "ejs");
app.use(express.static(__dirname + "/public"));
var conferences = [];
//////////////////// ROUTES /////////////////////////
app.get("/", (req, res) => {
res.render("index.ejs");
});
app.get("/home", (req, res) => {
res.render("home.ejs", { conferences: conferences });
});
app.get("/conferences/@me", (req, res) => {
res.render("my_conferences.ejs");
});
app.get("/create/conference", (req, res) => {
res.render("create.ejs");
});
app.post("/create/conference", (req, res) => {
console.log(req.body);
conferences.push({
hostName: req.body.hostName,
email: req.body.email,
topic: req.body.topic,
date: req.body.date,
time: req.body.time,
timezone: req.body.timezone,
details: req.body.details,
tags: req.body.tags,
});
res.redirect("/home");
});
app.use((req, res, next) => {
res.send("<h1> Page not found </h1>");
});
/////////////////////////////////////////////////////
//error handling
app.use(function (err, req, res, next) {
res.send({ error: err.message });
console.log(err);
});
//listen for requests
app.listen(process.env.port || 4000, function () {
console.log("Ready...");
});
This is my create.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/css/style.css" />
<title>Confrencia</title>
</head>
<body>
<header>
<nav class="navbar">
<div class="nav-heading">Confrencia</div>
<div>
<a href="/home">Home</a>
</div>
<div>
<a href="/conferences/@me">My Conferences</a>
</div>
<div>
<a href="/create/conference">Create a Conference</a>
</div>
</nav>
</header>
<main>
<form action="/create/conference" method="POST" for="createMeet">
<h3>Create a Conference</h3>
<input
type="text"
id="hostName"
name="hostName"
placeholder="Host Name"
required
/>
<input
type="email"
id="email"
name="email"
placeholder="Email"
required
/>
<input
type="text"
id="topic"
name="topic"
placeholder="Topic of the Virtual Conference"
required
/>
<input type="date" id="date" name="date" placeholder="Date" required />
<input type="time" id="time" name="time" placeholder="Time" required />
<input
type="text"
id="timezone"
name="timezone"
placeholder="Timezone"
required
/>
<input
type="text"
id="details"
name="details"
placeholder="Other Details"
/>
<input type="text" id="tags" name="tags" placeholder="tags" />
<button type="submit">Submit</button>
</form>
</main>
</body>
</html>
And this is the home.ejs, where the things will be shown:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/css/style.css" />
<title>Confrencia</title>
</head>
<body>
<header>
<nav class="navbar">
<div class="nav-heading">Confrencia</div>
<div>
<a href="/home">Home</a>
</div>
<div>
<a href="/conferences/@me">My Conferences</a>
</div>
<div>
<a href="/create/conference">Create a Conference</a>
</div>
</nav>
</header>
<main>
<% for(let i; i<conferences.length; i++){ %>
<%= var hello = conferences[i] %>
<%= <div class="conferenceCard">
<p>
<b><%= hello[name] %></b><br>
Date: <%= hello[date] %>
Time: <%= hello[time] %> <%= hello[timezone] %>
<%= hello[details] %>
</p>
<div class="interestButton">Interested?</div>
</div> %>
<% } %>
</main>
</body>
</html>
