Purpose of the if/else on the author drop down in express app course create book form section

MDN Learn
#1

Hey all,

I’m working through the express app course and have a question about the create book form.

Here’s what’s used on this form in the course:

for author in authors
  if book
    option(value=author._id selected=(author._id.toString()===book.author._id.toString() ? 'selected' : false) ) #{author.name}
  else
    option(value=author._id) #{author.name}

It appears that this if/else block is only being used to denote the selected value when the form is loaded (which shouldn’t impact functionality).

Am I missing something, or is this unnecessary? It seems like if selected is only being used to select the first author in the list as the default you could use this and get the same result, right?

for author in authors
  option(value=author._id) #{author.name}

If you needed a default selected value that would work with the validation measures, could you do this?

option(value="" selected)    
for author in authors
  option(value=author._id) #{author.name}

Is this so the selection stays the same if the form doesn’t validate? This exercise uses browser validation, so I’m not sure if that would be an issue since the form doesn’t reset if it doesn’t validate.

While I like lightweight code, I don’t want to miss anything that I’m not considering, so I appreciate the feedback.

Thanks

#2

Hi @johnhodge,

The purpose is to make sure that the correct book is selected when your book form is submitted with errors (i.e. you do a post, it is incorrect, then the page is displayed again with the correct data pre-filled). This same book form is used to update a book record too - and again, at this point you have a book and author already selected.

You can see the form used a few times in the final tutorial: https://github.com/mdn/express-locallibrary-tutorial/blob/master/controllers/bookController.js

Does this make sense? After you confirm, I’ll go back and check whether I covered this properly in the docs.

#3

Perfect, okay that makes sense, I didn’t realize this form is being used for updating the book as well.

This is discussed in the view section of the create book course where there’s a bullet that says:

In this case we determine what author to display by comparing the id of the current author option with the value previously entered by the user

I was confused because using browser validation interferes with processing the form submission upon button click. But, if the same form is used for updating the book, then this conditional makes sense and I’m sure I’ll encounter this logic in a later portion of the course.

Thanks for clearing that up for me. Much appreciated.

1 Like
#4

@johnhodge Cool. Two minor points to make here:

But, if the same form is used for updating the book, then this conditional makes sense …

Your response indicates perhaps I wasn’t clear that this condition is also used in book creating. On the first GET there is no author set, so the “else” is triggered (if f there are no errors on POST that’s it). But if there are errors in the form then the view gets displayed again and there is an author selected.

I was confused because using browser validation interferes with processing the form submission upon button click

I think you’re saying that with the browser validation the server checks can’t fail, so this bit of code won’t be executed. You’re right in theory, but we don’t code like that - the server should always validate the input and return failure. Why, well if for no other reason than you can’t rely on every browser to do the right thing according to the standard.

Thanks for highlighting the relevant bit in the docs for me. Will look at that now.

1 Like