Question 309321 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – A variable is not defined causing my ejs page not to be displayed

An undefined variable in an if statement is causing my ejs page not to be displayed.
When i remove the if statement, the page gets rendered and displayed, but because of the undefined variable and the if statement, an error occurs.

My Donors POST Route

app.post('/donors', async (req, res) => {
  try {
    const { bloodType, city } = req.body;
    console.log('Blood Type:', bloodType);
    console.log('City:', city);



    console.log('SQL Query:', query);
    console.log('Parameters:', params);

    const donorsResult = await db.query(query, params);
    const donors = donorsResult.rows;

    // Render the donors.ejs view
    res.render('donors.ejs', { blood_type: bloodType, city_name: city, donors: donors, getBloodTypeText: getBloodTypeText });
  } catch (error) {
    console.error('Error fetching data:', error);
    res.status(500).send('Internal Server Error');
  }
});

My Donors GET Route

app.get('/donors', async (req, res) => {
  try {
    // Query the database to get distinct blood types
    const bloodTypesResult = await db.query('SELECT DISTINCT blood_type FROM donors');
    const bloodTypes = bloodTypesResult.rows;

    // Query the database to get all cities
   
    const citiesResult = await db.query('SELECT * FROM city');
    // const citiesResult = await db.query('SELECT city_name from donors')
    const cities = citiesResult.rows;

    // Query the database to get a default set of 12 donors
    // Make sure the limit is 12 or a closer number to that amount to display donors informaion by default 
    // prior to the users request
    const defaultDonorsResult = await db.query('SELECT * FROM donors LIMIT 12');
    const defaultDonors = defaultDonorsResult.rows;

    // Render the donors.ejs view and pass the blood types, cities, and default donors as variables
    res.render('donors.ejs', { blood_type: bloodTypes, city: cities, donors: defaultDonors, getBloodTypeText: getBloodTypeText, getCompatibleBloodTypes: getCompatibleBloodTypes});
  } catch (error) {
    console.error('Error fetching data:', error);
    // Handle other errors if needed
    res.status(500).send('Internal Server Error');
  }
});

Second Donors GET Route to render the page

app.get('/donors', (req, res) => {
  res.render('donors.ejs', {});
});

Third Donors GET Route

app.get('/views/donors.ejs', (req, res) => {
  res.render('donors.ejs', {});
});

donors.ejs Code

<div class="container mt-5">
  <div class="row justify-content-center">
    <% if (donors && donors.length > 0) { %>
      <% donors.forEach(donor => { %>
        <div class="col-12 col-sm-6 col-lg-4 mb-4">
          <div class="card" style="background-color: #D27878;">
            <div class="card-body">
              <h5 class="card-title"><%= donor.full_name %></h5>
              <p class="card-text">Blood Type: <%= donor.blood_type %></p>
              <p class="card-text">City: <%= donor.city_name %></p>
              <p class="card-text">Phone: <%= donor.phone_number %></p>
            </div>
          </div>
        </div>
      <% }); %>
    <% } else { %>
      <p>No donors found.</p>
    <% } %>
  </div>
</div>

The donors variable was not declared prior to the if statement

The page is displayed only when the route is typed in the URL, but if a button is clicked to direct the user to the donors.ejs page, the following error occurs

ReferenceError: C:UserskingaDownloadsBackendGraduationProjectHopeDrops websiteviewsdonors.ejs:98
    96| <div class="container mt-5">

    97|   <div class="row justify-content-center">

 >> 98|     <% if (donors && donors.length > 0) { %>

    99|       <% donors.forEach(donor => { %>

    100|         <div class="col-12 col-sm-6 col-lg-4 mb-4">

    101|           <div class="card" style="background-color: #D27878;">


donors is not defined
Tags:

2

Answers


  1. 0

    Yes, because your second and third snippets do not pass a donors variable, so the error is exactly right. If donors is required, then you’d better supply it every time>

    app.get('/donors', (req, res) => {
  res.render('donors.ejs', {donors: 0});
});

app.get('/views/donors.ejs', (req, res) => {
  res.render('donors.ejs', {donors: 0});
});
    Login or Signup to reply.
  2. 0

    In res.render('donors.ejs', {}) there are no variables passed to the view ({} is empty). So there is no donors variable defined in the view, you never pass it.

    Perhaps you should pass undefined instead:

    res.render('donors.ejs', { donors: undefined })

    You may have the same problem with other values you aren’t passing too.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search