Cannot render MySQL data using ExpressJS and EJS

Question

I can't display MySQL table data on HTML page. Right now, I am using Express framework with the EJS template engine. I have app.js main file and also index.ejs file (on views folder). I have a simple table with the name: form and two fields (name, username). When run an app, see below error:

TypeError: C:\Users\azeri\Desktop\NODE-COURSE\node-form\views\index.ejs:11
    9|           </thead>  

    10|            <tbody>  

 >> 11|             <% obj.forEach(function(user){ %>

    12|                 <tr>  

    13|                     <td><%= user.name %></td>  

    14|                     <td><%= user.username %></td>


obj.forEach is not a function
    at eval (C:\Users\azeri\Desktop\NODE-COURSE\node-form\views\index.ejs:10:12)
    at index (C:\Users\azeri\Desktop\NODE-COURSE\node-form\node_modules\ejs\lib\ejs.js:691:17)
    at tryHandleCache (C:\Users\azeri\Desktop\NODE-COURSE\node-form\node_modules\ejs\lib\ejs.js:272:36)
    at View.exports.renderFile [as engine] (C:\Users\azeri\Desktop\NODE-COURSE\node-form\node_modules\ejs\lib\ejs.js:489:10)
    at View.render (C:\Users\azeri\Desktop\NODE-COURSE\node-form\node_modules\express\lib\view.js:135:8)
    at tryRender (C:\Users\azeri\Desktop\NODE-COURSE\node-form\node_modules\express\lib\application.js:640:10)
    at Function.render (C:\Users\azeri\Desktop\NODE-COURSE\node-form\node_modules\express\lib\application.js:592:3)
    at ServerResponse.render (C:\Users\azeri\Desktop\NODE-COURSE\node-form\node_modules\express\lib\response.js:1012:7)
    at Query.<anonymous> (C:\Users\azeri\Desktop\NODE-COURSE\node-form\app.js:23:11)
    at Query.<anonymous> (C:\Users\azeri\Desktop\NODE-COURSE\node-form\node_modules\mysql\lib\Connection.js:526:10)

app.js file

var express = require('express');
var app = express();
var path = require('path');
var mysql = require('mysql');

app.engine('html', require('ejs').renderFile);
app.set('view engine', 'ejs');

var con = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "root",
  database: "nodeform"
});

var obj = {};
app.get('', function(req, res){
  con.query("SELECT * FROM form", function (err, result) {
    if (err) throw err;
    else {
      obj = {print: result};
      res.render('index', {obj: obj});
    }
  });
});

app.listen(3000);
console.log("Running at Port 3000");

index.ejs file

<html>
      <body>
        <table id="table">  
          <thead>  
              <tr>  
                  <th>Name</th>  
                  <th>Username</th>  
              </tr>  
          </thead>  
           <tbody>  
            <% obj.forEach(function(user){ %>
                <tr>  
                    <td><%= user.name %></td>  
                    <td><%= user.username %></td>
                </tr>                                   
            <% }) %>
           </tbody>
      </table>
    </body>
</html>

Kaz Kaz · Accepted Answer · 2020-12-16T20:39:02

The problem here is that your obj object has a subproperty print that is the array of results, so you should use forEach on obj.print in your EJS since forEach only works for arrays :

<tbody>
    <% obj.print.forEach(function(user){ %>
        <tr>  
            <td><%= user.name %></td>  
            <td><%= user.username %></td>
         </tr>                                   
    <% }) %>
</tbody>

Cannot render MySQL data using ExpressJS and EJS

app.js file

index.ejs file

1 Answers