cant access single object in array in ejs

Question

im re-rendering my form with any errors,

// controller.js 

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

and im able to display the errors in a list like this

// ejs file

 <% if (locals.errors) { %>

       <ul>

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

        </ul>
  <% } %>

but id like to access each error individually, so i can display them under the invalid input instead of all of them in a list at the bottom of the form.

below is my closest solution, it certainly isn't correct but its as close as ive gotten. (it breaks depending on what other errors are or aren't present)

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

any help would be appreciated!

Anton · Accepted Answer · 2020-08-19 17:27:36Z

1

any help would be appreciated!

Ok, here is my suggestion.

You need to understand which error goes to which input field. As an example (if you can do it) you can change the errors object (array) to something like this:

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

So now your errors has keys (if no errors, then let errors = {}).

And so you can add an error message to any input field:

<% 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"/>

If you need to convert your errors array into the object, you can do it:

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

Run the code above in the place where you have your errors array, but before rendering to the page. So, the page will be rendered as I wrote, but change errors to errorsObj:

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

edited Aug 19, 2020 at 17:27

answered Aug 18, 2020 at 21:33

Anton

2,7231 gold badge9 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

j roc Over a year ago

thanks for the suggestion, unfortunately i dont think i can change the array (or i dont know how) since its being created through the 'validationResult'

Anton Over a year ago

@jroc You can convert on the front-end. I've updated my answer.

j roc Over a year ago

this is perfect! thank u so much, i really appreciate it!!

Dheeraj Teta · Accepted Answer · 2020-08-19 15:29:07Z

0

quick fix :

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

Also checkout lodash

answered Aug 19, 2020 at 15:29

Dheeraj Teta

514 bronze badges

1 Comment

j roc Over a year ago

unfortunately this solution doesn't seem to work, if the 1st error isn't true, then the 2nd error becomes the 1st, which makes it impossible to display in the correct spot. thanks for the reply though and for recommending lodash, i will definitely check that out. thanks!

Collectives™ on Stack Overflow

cant access single object in array in ejs

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related