Handlebars if statement condition show content based on membershipID

Question

Quick details about database

I have users table which is referenced to membership table.

Here is some sample data

userID   username   membershipID
  1        test          1    -- Admin
  2        test2         2    -- Standard

Current Handlebars

I have a handlebars page set up already

{{#if user}}

  Admin


  About Us


  Contact Us


  Logout


{{else}}


  Admin


  Register


  Login


  About Us


  Contact Us


{{/if}}

Details of above code

When user is logged in it shows relevant nav items.

Question

I am able to get an output in handle bars of the membershipID of a user, for example:

{{user.membershipID}}

will give me an output of 1 or 2. How can I then create an if statement in handlebars to determine what content to show?

Or is there an alternative method? I can show you all my code if needed?

Any help is appreciated!

Edit 1

I am trying to test out the handlebars register:

Project/helpers/handlebars-helper.js

module.exports = {


  membership: ("ifEqual", function(variable1,variable2,options){
    if (variable1 === variable2) {
    return options.fn(this);
  } else {
    return options.inverse(this);
  }
 })

}

project/app.js

const handlebars = require('express-handlebars');

// Public directory static file
app.use(express.static(path.join(__dirname, '/public')));

// View engine
const {membership} = require('./helpers/handlebars-helpers');

app.engine('handlebars', handlebars({defaultLayout: 'home', helpers: {membership: membership}}));

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

project/views/partials/home/home-nav.handlebars

{{#membership}}
{{#ifEqual 1 1}}
Test
{{/ifEqual}}
{{/membership}}

Details and output

Here I am seeing if 1 is equals to 1 and if it is then, show h1 output. But I get this error:

TypeError: Cannot read property 'inverse' of undefined

Edit 2:

Here is where I am at now

project/helpers/handlebars-helpers.js

const handlebars = require('express-handlebars');

module.exports = {

  membership: handlebars.create('ifEquals', function(arg1, arg2, options) {
    return (arg1 == arg2) ? options.fn(this) : options.inverse(this);
})


}

project/views/partials/home/home-nav.handleabrs

{{#membership}}
{{#ifEqual 2 2}}
  Test
{{/ifEqual}}
{{/membership}}

Output on HTML

[object Object]

user_12129150 · Answer

Finally figured it out!

project/app.js

// View engine

const {membership} = require('./helpers/handlebars-helpers');

app.engine('handlebars', handlebars({defaultLayout: 'home', helpers: {membership: membership}}));

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

project/helpers/handlebars-helper.js

module.exports = {

  membership: function(var1, var2, options){
    if(var1 === var2) {
    return options.fn(this);
  }
  return options.inverse(this);
  }
}

and finally in the .handlebars:

{{#membership 1 5}}
True
{{/membership}}

user_6697475 · Answer

You can define custom helper functions to check for equality of 2 variables and act accordingly. Below is how to define a custom helper:

  const hbs = require("hbs");
  
  hbs.registerHelper("ifEqual", function (variable1,variable2,options){
    if (variable1 === variable2) {
      return options.fn(this);
    }
    return options.inverse(this);
  });

Below is how you call it from your hbs view:

  {{#ifEqual variable1 variable2}}
    //code
  {{else}}
    //code
  {{/ifEqual}}

Elaborating with an example:

Minimal back end code:

const express = require("express");
const app = express();

const hbs = require("hbs");

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


app.listen(3000)
hbs.registerHelper("ifEqual", function (variable1,variable2,options){
  if (variable1 === variable2) {
    return options.fn(this);
  }
  return options.inverse(this);
});

app.get("/", (req, res) => {
  return res.render("test.hbs", {user:{id:1}})
});

Minimal frontend code:




    


    {{#ifEqual user.id 2}}
        "User Id: "{{user.id}} "is equal to 2"
    {{else}}
      "User Id: "{{user.id}} "is not equal to 2"
    {{/ifEqual}}

Handlebars if statement condition show content based on membershipID

2 Answers