CODEWITHSUNDEEP
node.jsexpressejs
Drake Coleman
Drake Coleman

Reputation: 31

EJS "itemTitle" is not defined

 ```<div class="box" id="heading">
    <h1><%= itemTitle %></h1>
     </div> 
       <div class="box">
         <% newListItems.forEach((item)=>{%>
           <form action="/delete" method="POST">
             <div class="item">
                <input type="checkbox"
                    name="checkbox"
                    value="<%= item._id %>"
                    onchange="this.form.submit()"
                />
                <p><%= item.name %></p>
            </div>
          </form>

         <%})%>```

  ```app.get("/", function (req, res) {
      Item.find((err, items) => {
        if (err) {
         console.log(err);
      } else {
        res.render("list", { itemTitle: "Booyah", newListItems: 
        items });
         }
       });
     }); ```
     ```ReferenceError: /Users/apple/Documents/todolist-v2-starting- 
        files/views/list.ejs:4
        2| 
        3| <div class="box" id="heading">
     >> 4|   <h1><%= itemTitle %></h1>
        5| </div>
        6| 
        7| <div class="box">

     itemTitle is not defined```

It works, but I keep getting the last code in my console. but when i take out the "itemTitle" it works with the newListItems without error. Its making me add more context, but seriously, idk what else to put. Im a beginner, and I've been hacking away trying a bunch of different variations to get it to work, guy on discord couldn't help. Thanks for checking this out.

Upvotes: 0

Views: 113

Answers (1)

eol
eol

Reputation: 24565

I've cloned your repo and it works fine so far. The only thing that comes to mind is when you request a specific list through app.get("/:customListName") {...}. There, you don't pass a title to the template and obviously this will cause ejs to fail rendering the template:

if (!foundList) {
        // ...
         res.render("list"  foundList.name + "", {
           newListItems: foundList.items,
         });
      } else {
        res.render("list", { newListItems: foundList.items });
      }

So you should fix this to something like (even better would be to render a template for "List not found"):

if (!foundList) {
        // ...
        res.render("list", {title: 'Custom List', newListItems: []});
      } else {
        res.render("list", {title: 'Custom List', newListItems: []});
      }

Upvotes: 1

Related Questions