title: Displaying MySQL query results as HTML with EJS
body: <p>I am building an app (using EJS view engine and Node.js) which interacts with an MySQL database I have built locally. I can receive results from my queries successfully as a JSON string, but I cannot send the information to a view (to be displayed as HTML) as I am getting the error: unsafefoods is not defined.</p>
  
  <p>My 'app.js' file declares:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>var unsafefoods = require('./routes/unsafefoods');
  app.use('/unsafefoods', unsafefoods);</code></pre>
  </div>
  </div>
  </p>
  
  <p>My route 'unsafefoods.js' declares:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>var express = require('express');
  var router = express.Router();
  
  /* GET all safe foods */
  router.get('/', function (req, res, next) {
   connection.query('SELECT * from appycavy.foods WHERE safe = 0', function (error, rows, fields) {
    if (error) {
     res.send(JSON.stringify({
      "status": 500,
      "error": error,
      "response": null
     }));
     //If there is error, we send the error in the error section with 500 status
    } else {
     res.render(unsafefoods, {
      title: 'Unsafe foods list',
      data: rows
     })
    }
   });
  });
  
  module.exports = router;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And my view 'unsafefoods.ejs' declares:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;% include ./partials/head %&gt;
  &lt;/head&gt;
  
  &lt;body class="container"&gt;
    &lt;header&gt;
      &lt;% include ./partials/header %&gt;
    &lt;/header&gt;
    &lt;main&gt;
      &lt;div class="jumbotron"&gt;
        &lt;h2&gt;Safe foods&lt;/h2&gt;
        &lt;p&gt;The following is a list of all
          &lt;b&gt;unsafe&lt;/b&gt; foods
        &lt;/p&gt;
        &lt;!-- table to display unsafe foods --&gt;
        &lt;table width='80%' border=0&gt;
   
          &lt;tr style='text-align:left; background-color:#CCC'&gt;
              &lt;th&gt;ID&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Safe&lt;/th&gt;
              &lt;th&gt;Type&lt;/th&gt;
              &lt;th&gt;Favourite&lt;/th&gt;
              &lt;th&gt;Water&lt;/th&gt;
              &lt;th&gt;Energy&lt;/th&gt;
              &lt;th&gt;Vitamin C&lt;/th&gt;
              &lt;th&gt;Sugar&lt;/th&gt;
              &lt;th&gt;Lipid fat&lt;/th&gt;
              &lt;th&gt;Calcium&lt;/th&gt;
              &lt;th&gt;Phosphorus&lt;/th&gt;
              &lt;th&gt;CaP ratio&lt;/th&gt;
          &lt;/tr&gt;
          
          &lt;!--
              Using FOREACH LOOP for the users array
              
              myArray.forEach(function(el, index) {
                  // el - current element, i - index
              });
          --&gt;
          &lt;% if (data) { %&gt;
          &lt;% data.forEach(function(unsafefoods){ %&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;%= unsafefoods.id %&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;%= unsafefoods.name %&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;%= unsafefoods.safe %&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;%= unsafefoods.type %&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;%= unsafefoods.favourite %&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;%= unsafefoods.water %&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;%= unsafefoods.energy %&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;%= unsafefoods.vitaminC %&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;%= unsafefoods.sugars %&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;%= unsafefoods.lipidFat %&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;%= unsafefoods.calcium %&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;%= unsafefoods.phosphorus %&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;%= unsafefoods.capRatio %&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;div style="float:left"&gt;
                          &lt;a href='/unsafefoods/edit/&lt;%= unsafefoods.id %&gt;'&gt;Edit&lt;/a&gt; &amp;nbsp;                            
                          &lt;form method="post" action="/unsafefoods/delete/&lt;%= unsafefoods.id %&gt;" style="float:right"&gt;
                              &lt;input type="submit" name="delete" value='Delete' onClick="return confirm('Are you sure you want to delete?')" /&gt;
                              &lt;input type="hidden" name="_method" value="DELETE" /&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;% }) %&gt;
          &lt;% } %&gt;
       
      &lt;/table&gt;
      &lt;/div&gt;
    &lt;/main&gt;
    &lt;footer&gt;
      &lt;% include ./partials/footer %&gt;
    &lt;/footer&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any pointers would be appreciated,</p>
  
  <p>Thanks,</p>