无法在 ejs 中访问数组中的单个对象

Question

我正在重新呈现我的表单，但有任何错误，

// controller.js 

(req, res, next) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      res.render("quotes", {
        form: req.body,
        errors: errors.array()
      });
      return;
    }

并且我能够在这样的列表中显示错误

// ejs file

 <% if (locals.errors) { %>

       <ul>

          <% errors.forEach(error => { %>
          <li><%= error.msg %></li>
          <% }) %>

        </ul>
  <% } %>

但我喜欢单独访问每个错误，因此我可以在无效输入下显示它们，而不是将它们全部显示在表单底部的列表中。

下面是我最接近的解决方案，它当然不正确，但它与我得到的最接近。（它会根据其他错误的存在或不存在而中断）

//controller.js

(req, res, next) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      res.render("quotes", {
        form: req.body,
        errors: errors.array()
        error1: errors.array()[0].msg,
        error2: errors.array()[1].msg,
        error3: errors.array()[2].msg,
      });
      return;
    } 


// ejs file

<% if (locals.errors) { %> <li> <%= error1 %></li> <% } %>


errors: [
    {
      value: '',
      msg: 'First name must be specified',
      param: 'firstName',
      location: 'body'
    },
    {
      value: '',
      msg: 'Last name must be specified',
      param: 'lastName',
      location: 'body'
    },
    {
      value: '',
      msg: 'Please enter a valid email',
      param: 'email',
      location: 'body'
    }
  ]

如有任何帮助，我们将不胜感激！

Answer 1

any help would be appreciated!

好的，这是我的建议。

您需要了解哪个错误转到哪个输入字段。作为一个例子（如果你能做到的话）你可以将 errors 对象（数组）更改为这样的东西：

let errors = {
    'firstName': {
      value: '',
      msg: 'First name must be specified',
      location: 'body'
    },
    'lastName': {
      value: '',
      msg: 'Last name must be specified',
      location: 'body'
    },
    'email': {
      value: '',
      msg: 'Please enter a valid email',
      location: 'body'
    }
};

所以现在你的错误有键（如果没有错误，那么 let errors = {}）。

因此您可以在任何输入字段中添加错误消息：

<% if (locals.errors && errors.firstName) { %> <div class="error"><%= errors.firstName.msg %></div> <% } %>
<input type="text" id="firstName" name="firstName"/>

<% if (locals.errors && errors.lastName) { %> <div class="error"><%= errors.lastName.msg %></div> <% } %>
<input type="text" id="lastName" name="lastName"/>

如果你需要将你的errors数组转换成对象，你可以这样做：

let errorsObj = {};
errors.map((item) => {
  const id = item.param;
  delete item.param;
  errorsObj[id] = item;
});

运行上面的代码位于 errors 数组所在的位置，但在呈现到页面之前。因此，页面将按照我写的方式呈现，但将 errors 更改为 errorsObj:

<% if (locals.errors && errorsObj.firstName) { %> <div class="error"><%= errorsObj.firstName.msg %></div> <% } %>
<input type="text" id="firstName" name="firstName"/>

Answer 2

快速修复：

//controller.js

(req, res, next) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      res.render("quotes", {
        form: req.body,
        errors: errors.array()
        error1: errors.array()[0] && errors.array()[0].msg,
        error2: errors.array()[1] && errors.array()[1].msg,
        error3: errors.array()[2] && errors.array()[2].msg,
      });
      return;
    }

也结帐lodash

无法在 ejs 中访问数组中的单个对象

cant access single object in array in ejs

javascript

arrays

ejs

express