将消息从后端传递到前端

Question

I'm learning Node and EJS and need some help with my program. I'm trying to get the data from Form and store in the database after validating it. During validation, I couldn't pass messages from backend to frontend. I'm not sure what I'm doing wrong.

Backend Code :

let { agentname } = req.body;

let errors = [];

if (!agentname) {
  errors.push({ message: 'Please enter all Mandatory Fields' });
}

if (errors.length > 0) {
  res.render('addagent', { errors });
} else {
  pool.query(
    `SELECT * FROM agentinfo where agentname = $1`,
    [agentname],
    (err, results) => {
      if (err) {
        throw err;
      }

      console.log(results.rows);

      if (results.rows.length >= 1) {
        errors.push({ message: 'Agent is already added. Please check again' });
        console.log(errors);
        res.render('addagent', { errors });
      }
    }
  );
}

Front end:

<section class="addsec">
        <div class="addagent">
            <h3>Add Agent</h3>

            <ul>               
                <% if(messages.error) { %>
                <li> Test Message </li>
                <li><%= messages.error %></li>
                <% } %>   
            </ul>
        </div>
    </section>

I try to print the message in the backend for validation and it is working fine in the backend but that messages are not seen on the front end.

Please help to understand and fix this error

Answer 1

You are passing errors which is an array of object, you should be able to access the messages with:

<section class="addsec">
  <div class="addagent">
    <h3>Add Agent</h3>

    <ul>
      <% if (errors.length > 0) { %>
      <li>Test Message</li>
      <li><%= errors[0].message %></li>
      <% } %>
    </ul>
  </div>
</section>

Answer 2

I fixed this issue by correcting the front-end code like below.

 <ul>
    <% if(typeof errors != 'undefined') { %>
      <% errors.forEach(error =>{ %>
         <li><%= error.message %></li>
         <% }) %> 
      <% } %>
 </ul>