How to prevent ejs from splitting a string in attribute-value pair in a form field

TL:DR – put quotes around your EJS value when it is being used as an HTML attribute

I was making a simple Express app with EJS templating and MongoDB for my REST API. I passed the response, which was a few strings and a date, to the view in the typical fashion, and I could verify that the data was being passed by outputting the object to the view like this:

<%=responseObject%>
//which displayed this:
{ 
  _id: 5d347b004b0c201108909a55, 
  name: 'hot dogs', 
  description: 'costco dogs', 
  dateOnBag: '3/4/19', __v: 0 
}

This displayed the entire object on the screen. Additionally, I could display one of the object’s values using dot notation with no problem.

<h1>Edit <%=responseObject.name%></h1>
// which displayed this

Edit hot dogs

However, when I tried to use the same syntax to prefill a form field like this:

<li>
  <input type="text" name="name" value=<%-responeseObject.name%>><br />
  <label for="name">Item Name </label>
<li>

It pre-filled only the first word, “hot” instead of both words “hot dog”


I finally figured out that I needed to put quotes around it. When Express renders the page it simply replaces the EJS syntax with a string of text so the resulting HTML looked more like this:

  <input type="text" name="name" value=hot dog><br />

I later learned that HTML attribute values do not always need quotes. (basically, when there are no spaces) https://mathiasbynens.be/notes/unquoted-attribute-values So in the example above,

value=hot dog
//is equivalent to 
value="hot" dog

which leaves dog just hanging out there, an attribute without any value which HTML just ignores in this case. Actually, if I’m interpreting the spec correctly, it is setting the value of dog to true which is any case is not used so again it is ignored. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

Web Scraping with Cheerio.js

When learning web development, they all tell you to find a problem in your life and create a solution using code to create a great project. Well, I drive for Uber and I wanted to know when the most flights would be coming into my local airport. The airport website has listings, but it’s a cluttered mess. I wanted something where I could just see at a glance when the most flights were coming in. I could not find a public/free API for flight information so I needed to figure out a little bit of web scraping. Code and working example is here: https://codesandbox.io/s/7zx3v5kqmq and I did a video walk-through explaining how the code works here:

Algorithms!

I’ve been making more videos and this time I’ve been working on the freeCodeCamp selection of algorithm challenges. I’ve been doing one every day and adding them to the playlist below. I’m twelve days in and the plan is to do one every day until I’ve got them all!

Check out my youtube channel

I’ve been adding videos about JavaScript to my youtube channel and you can take a look at it here: https://www.youtube.com/channel/UCqdNQHOLz3PmB4cDvQkdQ1w/videos

They are not professionally produced.  I just turn on youtube and start typing generally.  You may have heard of “rubber duck decoding” and this is basically how I make these videos.  They are either me talking through some code I’ve just worked on or some are videos I’ve made where I’m trying to help a friend out with some coding issue.