https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_book_form

MDN
,
1

I have been trying to learn server side website programming from MDN’s Express/ Node Js articles and currently on book form creation article .

I tried to type the whole PUG template code on my text editor ,
even later tried to copy /paste the same pug code but still its giving error !

Any help !

here’s the copied pug template code .

extends layout

block content
  h1= title

  form(method='POST' action='')
    div.form-group
      label(for='title') Title:
      input#title.form-control(type='text', placeholder='Name of book' name='title' required='true' value=(undefined===book ? '' : book.title) )
    div.form-group
      label(for='author') Author:
      select#author.form-control(type='select', placeholder='Select author' name='author' required='true' )
        - authors.sort(function(a, b) {let textA = a.family_name.toUpperCase(); let textB = b.family_name.toUpperCase(); return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;});
        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}
    div.form-group
      label(for='summary') Summary:
      textarea#summary.form-control(type='textarea', placeholder='Summary' name='summary' required='true') #{undefined===book ? '' : book.summary}
    div.form-group
      label(for='isbn') ISBN:
      input#isbn.form-control(type='text', placeholder='ISBN13' name='isbn' value=(undefined===book ? '' : book.isbn) required='true')
    div.form-group
      label Genre:
      div
        for genre in genres
          div(style='display: inline; padding-right:10px;')
            input.checkbox-input(type='checkbox', name='genre', id=genre._id, value=genre._id, checked=genre.checked )
            label(for=genre._id) #{genre.name}
    button.btn.btn-primary(type='submit') Submit

  if errors
    ul
      for error in errors
        li!= error.msg
2

Can you please provide the error also.

3

Error :

\Web Development practice\Node js Practice\Local Library Website Porject 02\Local-Library-Tutorial\views\book_form.pug:13 11| label(for=‘author’) Author: 12| select#author.form-control(type=‘select’, placeholder=‘Select author’ name=‘author’ required=‘true’ ) > 13| - authors.sort(function(a, b) {let textA = a.family_name.toUpperCase(); let textB = b.family_name.toUpperCase(); return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;}); 14| for author in authors 15| if book 16| option(value=author._id selected=(author._id.toString()===book.author._id.toString() ? ‘selected’ : false) ) #{author.name} Cannot read properties of undefined (reading ‘sort’)
TypeError: C:\CodewithHarry\Web Development practice\Node js Practice\Local Library Website Porject 02\Local-Library-Tutorial\views\book_form.pug:13
11| label(for=‘author’) Author:
12| select#author.form-control(type=‘select’, placeholder=‘Select author’ name=‘author’ required=‘true’ )

13| - authors.sort(function(a, b) {let textA = a.family_name.toUpperCase(); let textB = b.family_name.toUpperCase(); return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;});
14| for author in authors
15| if book
16| option(value=author._id selected=(author._id.toString()===book.author._id.toString() ? ‘selected’ : false) ) #{author.name}

Also authors is schema object .

4

The error you’re encountering, Cannot read properties of undefined (reading ‘sort’) in your PUG template, suggests that the authors variable is not being passed into the template or is undefined at the time the template is being rendered.

Here are some steps to troubleshoot and fix this issue:

  1. Check the Route Handler:
    Ensure that in the route handler in your Express.js code, you are passing the authors variable to the template. It should look something like this:

    res.render('book_form', { title: 'Create Book', authors: authorsArray, ... });

    In this snippet, authorsArray should be the array of author objects that you want to display in the template.

  2. Ensure authors is an Array:
    The authors variable needs to be an array for the sort function to work. If it’s not an array, you’ll encounter the error you’re seeing. Make sure that the data you’re passing to the template is indeed an array.

  3. Check for Null or Undefined:
    It’s good practice to check if authors is null or undefined before trying to access its properties or methods. You could modify your PUG template to include a check like this:

    if typeof authors !== 'undefined' && authors
  - authors.sort(function(a, b) { ... });
  for author in authors
    ...
else
  p No authors available

    This will render a message if no authors are available instead of causing an error.

  4. Review Data Passed to the Template:
    Double-check the data being passed to the PUG template from your Node.js/Express.js server. Make sure that the authors data is correctly retrieved from the database and passed to the PUG renderer.

  5. Debugging:
    If you’re still having trouble, add console.log(authorsArray) in your route handler before the res.render call to see what data is being passed to the PUG template.

5

Thank you !

according to your suggestions , storing author schema object as an array worked .