如何在 EJS 模板中渲染一个对象

huangapple go评论66阅读模式
英文:

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
};

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.

英文:

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: &quot;national&quot;,
  departure: &quot;Paris&quot;,
  destination: &quot;Rome&quot;,
  departureTime: &quot;10:00 AM&quot;,
  price: 100
};here

res.render(&#39;companyDashboard&#39;, { trip, company: req.user.company });

Here is the EJS template that I am using:

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

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(&#39;companyDashboard&#39;, { trip, company: req.user.company });

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

答案1

得分: 1

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: &quot;national&quot; where it should be type: &quot;national&quot;.

在对象声明中,第一行存在语法错误。你写成了 type type: &quot;national&quot;,应该改为 type: &quot;national&quot;

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.

在 EJS 模板中,你尝试在 trip.departureTime 上使用 forEach,好像它是一个数组,但 trip.departureTime 实际上是一个字符串,而不是数组。

So first correct the object declaration:

因此,首先纠正对象声明:

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

Then, depending on your requirements:

然后,根据你的需求:

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

如果 departureTime 应该是一个单独的时间字符串,在 EJS 模板中删除 forEach

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

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

如果 departureTime 应该是一个时间数组,将其改为数组:

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

And keep the forEach in the EJS template.

然后在 EJS 模板中保留 forEach

英文:

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: &quot;national&quot; where it should be type: &quot;national&quot;.

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: &quot;national&quot;,
  departure: &quot;Paris&quot;,
  destination: &quot;Rome&quot;,
  departureTime: &quot;10:00 AM&quot;,
  price: 100
};

Then, depending on your requirements:

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

&lt;strong&gt;Departure Time :&lt;/strong&gt; &lt;%= trip.departureTime %&gt;&lt;br&gt;

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

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

And keep the forEach in the EJS template.

答案2

得分: 0

这里是控制器部分的翻译:

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');
  }
};

以下是ejs代码部分的翻译:

<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>

希望这些翻译对您有所帮助。如果您需要更多帮助,请随时告诉我。

英文:

Here the controller:

exports.createTrip = async (req, res) =&gt; {
  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(&#39;success_msg&#39;, &#39;Trajet cr&#233;&#233;&#39;);
    console.log(trip)
    console.log(req.user.company)
    res.render(&#39;companyDashboard&#39;, { trip, company: req.user.company });
  } catch (error) {
    console.log(error);
    req.flash(&#39;error_msg&#39;, &#39;Une erreur s\&#39;est produite lors de la soumission du trajet&#39;);
    res.redirect(&#39;/company/tripForm&#39;);
  }
};

And the ejs code:

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

huangapple
  • 本文由 发表于 2023年6月12日 08:53:12
  • 转载请务必保留本文链接:https://go.coder-hub.com/76453090.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定