时间戳

首页 > 解决方案 > 无法在ejs中访问数组中的单个对象

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

问题描述

我正在重新渲染我的表单，出现任何错误，

// 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'
    }
  ]

任何帮助，将不胜感激！

标签： javascriptarraysexpressejs

解决方案

任何帮助，将不胜感激！

好的，这是我的建议。

您需要了解哪个错误出现在哪个输入字段中。例如（如果可以的话），您可以将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"/>

推荐阅读