CODEWITHSUNDEEP
node.jshandlebars.js
clint
clint

Reputation: 13

Data is not displaying nodejs handlebars

I am trying to display data from my database but it doesnt seem to show up, what I did is followed a tutorial for this on ejs and it seemed to work fine and I am now trying it on handlebars

app.get('/', function(req, res, next) { 
  req.db.collection('users').find().sort({"_id": -1}).toArray(function(err, result) {
    if (err) {
      req.flash('error', err);
      res.render('user/list', {
        title: 'Users List', 
        data: ''
      });
    } else {
      res.render('user/list', {
        title: 'Users List', 
        data: result
      });
    }
  });
});

<table class="table table-striped">
<tr>
  <th>Name</th>
  <th>Type</th>
  <th>Desciption</th>
  <th>Action</th>
</tr>
{{#if user}}{{#each user}}
<tr>
  <td>{{this.Name}}</td>
  <td>{{this.Type}}</td>
  <td>{{this.Description}}</td>
  <td>
    <div style="float:left">
      <a href='/users/edit/{{ user._id}}'>Edit</a> &nbsp;             
      <form method="post" action="/users/delete/{{user._id}}" style="float:right">
        <input type="submit" name="delete" value='Delete' onClick="return confirm('Are you sure you want to delete?')" />
        <input type="hidden" name="_method" value="DELETE" />
      </form>
    </div>
  </td>
</tr>
{{/each}}{{/if}}
</table>

This is the ejs project that I made by following a tutorial and it currently is working 

<table width='80%' border=0>

<tr style='text-align:left; background-color:#CCC'>
  <th>Name</th>
  <th>Type</th>
  <th>Description</th>
  <th>Action</th>
</tr>

<!--
  Using FOREACH LOOP for the users array

  myArray.forEach(function(el, index) {
    // el - current element, i - index
  });
-->
<% if (data) { %>
  <% data.forEach(function(user){ %>
    <tr>
      <td><%= user.Name %></td>
      <td><%= user.Type %></td>
      <td><%= user.Description %></td>
      <td>
        <div style="float:left">
          <a href='/users/edit/<%= user._id %>'>Edit</a> &nbsp;             
          <form method="post" action="/users/delete/<%= user._id %>" style="float:right">
            <input type="submit" name="delete" value='Delete' onClick="return confirm('Are you sure you want to delete?')" />
            <input type="hidden" name="_method" value="DELETE" />
          </form>
        </div>
      </td>
    </tr>
  <% }) %>
<% } %>
</table>

app.get('/', function(req, res, next) { 
  // fetch and sort users collection by id in descending order
  req.db.collection('benefits').find().sort({"_id": -1}).toArray(function(err, result) {

    if (err) {
      req.flash('error', err);
      res.render('user/list', {
        title: 'User List', 
        data: ''
      });
    } else {

      res.render('user/list', {
        title: 'User List', 
        data: result
      });
    }
  });
});

I just tried to convert the ejs code to handle bars with some reasearch on how it works but it did not turn out my way

I am still a beginner in using nodejs so please go easy on me

Upvotes: 1

Views: 840

Answers (1)

LMokrane
LMokrane

Reputation: 826

Not only you have to convert your templates from ejs to handlebars, but you also have to use handlebars middleware with express.

Here you will find one : https://www.npmjs.com/package/express-handlebars

Install it with, for example npm : npm install --save express-handlebars

Then, declare it in your server file :

var exphbs  = require('express-handlebars');

var app = express();

Edit:

I see that you use a kind of 'partials' to render your users' list page, so you have to declare its path :

var hbs = exbphbs.create({
  defaultLayout: 'main',
  partialsDir: 'views/partials/',
});

app.engine('handlebars', hbs.engine);
app.set('view engine', 'handlebars');

Now your workspace should look like this :

app.js
views/
  list.handlebars
  layouts/
    main.handlebars
  partials/
    user/
      list.handlebars

In your template, you check the presence of a user var, so you have to name it in the render function, instead of data:. Plus, render the file list.handlebars

app.get('/', function(req, res, next) {
  req.db.collection('users').find().sort({"_id": -1}).toArray(function(err, result) {
    if (err) {
      req.flash('error', err);
      res.render('list', {
        title: 'Users List', 
        user: '',
      });
    } else {
      res.render('list', {
        title: 'Users List', 
        user: result,
      });
    }
  });
});

views/list.handlebars :

{{> user/list}}

views/layouts/main.handlebars

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
{{body}}
  </body>
</html>

views/partials/user/list.handlebars : notice i removed this. and user.

<h1>{{title}}</h1>
<table class="table table-striped">
  <tr>
    <th>Name</th>
    <th>Type</th>
    <th>Desciption</th>
    <th>Action</th>
  </tr>
  {{#if user}}
    {{#each user}}
      <tr>
        <td>{{Name}}</td>
        <td>{{Type}}</td>
        <td>{{Description}}</td>
        <td>
          <div style="float:left">
            <a href='/users/edit/{{ _id}}'>Edit</a> &nbsp;
            <form method="post" action="/users/delete/{{_id}}" style="float:right">
              <input type="submit" name="delete" value='Delete' onClick="return confirm('Are you sure you want to delete?')" />
              <input type="hidden" name="_method" value="DELETE" />
            </form>
          </div>
        </td>
      </tr>
    {{/each}}
  {{/if}}
</table>

Upvotes: 1

Related Questions