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

Javascript – how to render a object an ejs template

I am trying to render a trip object in an EJS template, but, I am getting the error

"ReferenceError: trip is not defined."

I have passed the trip object to the EJS template as a parameter, and I have checked the spelling of the variable name. I don’t know why I am getting this error.

Here is the code that I am using:

const trip = {type type: "national",
  departure: "Paris",
  destination: "Rome",
  departureTime: "10:00 AM",
  price: 100
};here

res.render('companyDashboard', { trip, company: req.user.company });

Here is the EJS template that I am using:

<p class="card-text">
  <strong>Company :</strong> <%= company.company %><br>
  <strong>Type :</strong> <%= trip.type %><br>
  <strong>Departure :</strong> <%= trip.departure %><br>
  <strong>Destination :</strong> <%= trip.destination %><br>
  <strong>Departure Times :</strong>
    <ul>
      <% trip.departureTime.forEach(time => { %>
        <li><%= time %></li>
      <% }); %>
    </ul>
  <strong>Price :</strong> <%= trip.price %>
</p>

I would appreciate any help that you can provide.

I tried to render a trip object in an EJS template. I have expected the trip object to be rendered in the template, but, I got an error instead.
Here’s what I tried:

res.render('companyDashboard', { trip, company: req.user.company });

The trip object would be rendered in the companyDashboard template.
I got an error: ReferenceError: trip is not defined.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Here the controller:

    exports.createTrip = async (req, res) => {
  try {
    const { type, departure, destination, departureTime, price } = req.body;
    
    const trip = new Trip({
      company: req.user._id,
      type,
      routes: [
        {
          departure,
          destination,
          departureTime,
          price
        }
      ]
    });
    
    await trip.save();
    req.flash('success_msg', 'Trajet créé');
    console.log(trip)
    console.log(req.user.company)
    res.render('companyDashboard', { trip, company: req.user.company });
  } catch (error) {
    console.log(error);
    req.flash('error_msg', 'Une erreur s'est produite lors de la soumission du trajet');
    res.redirect('/company/tripForm');
  }
};

    And the ejs code:

    <div class="container">
  <h1 class="text-center me-3">Tableau de bord de <span class="text-primary"><%= company.company %> </span> </h1>
  <div class="row d-flex">
    <div>
      <%- include('tripForm') %>
    </div>
    <div class="card">
      <div class="card-header">
        Trajet soumis
      </div>
      <div class="card-body">
        <h5 class="card-title">Informations du trajet</h5>
        <p class="card-text">
          <strong>Compagnie :</strong> <%= company.company %><br>
      <strong>Type :</strong> <%= trip.type %><br>
      <strong>Départ :</strong> <%= trip.routes[0].departure %><br>
      <strong>Destination :</strong> <%= trip.routes[0].destination %><br>
      <strong>Heures de départ :</strong>
      <ul>
        <% trip.routes[0].departureTime.forEach(time => { %>
          <li><%= time %></li>
        <% }); %>
      </ul>
      <strong>Prix :</strong> <%= trip.routes[0].price %>
        </p>
      </div>
    </div>
  </div>
</div>

  2. 0

    From your question, I noticed two issues in your code:

    In the object declaration, you have a syntax error on the first line. You have written type type: "national" where it should be type: "national".

    In the EJS template, you are trying to use forEach on trip.departureTime as if it is an array, but trip.departureTime is a string, not an array.

    So first correct the object declaration:

    const trip = {
  type: "national",
  departure: "Paris",
  destination: "Rome",
  departureTime: "10:00 AM",
  price: 100
};

    Then, depending on your requirements:

    If departureTime is supposed to be a single time string, remove the forEach in the EJS template:

    <strong>Departure Time :</strong> <%= trip.departureTime %><br>

    If departureTime is supposed to be an array of times, change it to an array:

    const trip = {
  type: "national",
  departure: "Paris",
  destination: "Rome",
  departureTime: ["10:00 AM", "02:00 PM", "06:00 PM"],
  price: 100
};

    And keep the forEach in the EJS template.

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

Back To Top
Search