Troubleshooting a problem with handlebar's simple nested forEach loop

Question

Troubleshooting a problem with handlebar's simple nested forEach loop

This is a snippet of code related to node.js:

   app.get('/payees', function(req, res)
   {
     var categoriesPromise = Category.getAllCategories();
     var payeesWhereNullPromise = categoriesPromise.then(function() {
        return Payee.getAllPayeesWhere({categoryId:null})
    })
    payeesWhereNullPromise.then(function(payees) {
        var categories = categoriesPromise.value();
        res.render('payees', {categories: categories, subcategories: [], payees:payees});
    })
});

This code snippet is used on the front end side:

{{#each payees as |payee|}}
    {{#each categories as |category|}}
            category.name
    {{/each}}
{{/each}}

Although these codes work perfectly when executed separately, combining them does not produce the desired result.

javascript express handlebars.js

Answer 1

Answer №1

While using the #each in Handlebars, you can only access the properties of the array being looped through. In your example, the issue arises with the nested foreach where Handlebars attempts to find categories as an object property within the payees array. However, since categories is actually a global variable in your case, it cannot be found.

To achieve what you desire, you can utilize a Handlebars helper function.

UPDATE: Below is an illustration of how to use a handlebar helper function.

Template:

 {{#list categories payees}}{{/list}}

Node server code:

var hbs = require('hbs');
hbs.registerHelper('list', function(categories, payees, options) {
   var out = "";
   // Implement standard JavaScript here for customization.
   // Nested loops are also supported.
   // Assign the desired HTML to the out variable for rendering 
   // in your template.
   for (var i = 0; i < categories.length; i++) {
      out += "<div>"+categories[i]+"</div>";
      for (var j = 0; j < payees.length; j++) {
      // Continue as needed
      }
   }
   return out;
});

Documentation: https://github.com/pillarjs/hbs http://handlebarsjs.com/

Answer 2

While using the #each in Handlebars, you can only access the properties of the array being looped through. In your example, the issue arises with the nested foreach where Handlebars attempts to find categories as an object property within the payees array. However, since categories is actually a global variable in your case, it cannot be found.

To achieve what you desire, you can utilize a Handlebars helper function.

UPDATE: Below is an illustration of how to use a handlebar helper function.

Template:

 {{#list categories payees}}{{/list}}

Node server code:

var hbs = require('hbs');
hbs.registerHelper('list', function(categories, payees, options) {
   var out = "";
   // Implement standard JavaScript here for customization.
   // Nested loops are also supported.
   // Assign the desired HTML to the out variable for rendering 
   // in your template.
   for (var i = 0; i < categories.length; i++) {
      out += "<div>"+categories[i]+"</div>";
      for (var j = 0; j < payees.length; j++) {
      // Continue as needed
      }
   }
   return out;
});

Documentation: https://github.com/pillarjs/hbs http://handlebarsjs.com/

Troubleshooting a problem with handlebar's simple nested forEach loop

Answer №1

Similar questions

What is the best way to have a form open upwards when hovered over or clicked on?

What is the best way to convert exponential values to decimals when parsing JSON data?

Utilize JavaScript to submit the FORM and initiate the 'submit' Event

The "smiley" character added to the information during an Ajax call

Why am I encountering this export issue while attempting to integrate a NextAuth.js Provider with Next.js?

Refresh the Vuex store using the main process of Electron

What is the best way to add content to the nearest div with a specific class?

The Ajax request returned a status of 200, yet an error message was displayed

Using the base tag in Angular HTML5 mode can cause script links to break

How can I extract the URL from the event listener in Cordova's in-app browser event and then automatically close it once a specific URL is reached?

Angular version 7.2.1 encounters an ES6 class ReferenceError when attempting to access 'X' before it has been initialized

Steps for downloading a file using Selenium in Python while invoking ng-clickWant to learn how to

Extracting data from a Wikipedia table using web scraping in JavaScript

Postponing the activation of toggleClass in jQuery until the completion of a slide animation

Type 'function that accepts an argument of type User and TypedAction<"login start"> and returns void'

Can an entire object be bound to a model in an Angular controller function?

Tips for delivering a temporary piece of HTML and JavaScript to a live application using Node.js

encountered issue accessing optional property post validation check

Is there a way to prevent a link from activating when I click on one of its internal elements?

Navigational mapping tool with interactive user interface