Accessing the outer index in a nested loop using Handlebars

Imagine I have the code below:

<div>
  {{#each questions}}
  <div id="question_{{@index}}">
    {{#each this.answers}}
    <div id="answer_{{howToGetThisIndex}}_{{@index}}">
      {{this}}
    </div>
    {{/each}}
  </div>
  {{/each}
</div>

Is there a way to access the outer loop's index (question index) within the inner (answer) loop? To clarify, I would like the id to be in the format of

"answer_questionIndex_answerIndex"

Answer №1

Unearthed this gem buried in the depths of some documentation

Unlocking Block Parameters

A new feature introduced in Handlebars 3.0 allows for receiving named parameters from helpers that support it.

{{#each users as |user userId|}}
  Id: {{userId}} Name: {{user.name}}
{{/each}}

In the presented scenario, the 'user' variable will mirror the current context and 'userId' will correspond to the iteration index.

Delve deeper into this topic here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most effective way to divide input elements into an array in Angular?

How can I bind an input value to an ng-model as an array? For example, if I enter one, two, three, I want the resulting model to be [ "one","two","three" ]. Currently, this is my approach: <input type="text" ng-model="string" ng-change="convertToArra ...

Modifying button attribute through dropdown selection

In my project, I have a dropdown that gets its data from a database. Depending on the selection made in the dropdown, I would like to change the attribute of a button (data-uk-modal="{target:'#modal-'value of dropdown'}"). <select id "ci ...

Displaying Various Items Based on the Language Selected in the Google Translate Widget

Currently, I am in the process of developing a website complete with a shopping cart that will feature different products based on the country of the customer. The client has requested the use of Google Translate to allow for language changes. To accommod ...

Installing global confusion with NPM

npm install css-sprite --save npm install css-sprite -g I'm curious about the significance of these two commands. I understand that "-g" makes it global, but why is that important? And what does "--save" do exactly? ...

Customizing the appearance of selection dropdown options in React

Is it possible to customize the styling of the choices in a React input dropdown? For instance, I am interested in creating an autocomplete dropdown that presents the options neatly arranged in columns. Essentially, I want to design a dropdown data grid t ...

Updating MySQL Status Using PHP and JavaScript

I have a list of tasks that users can add dynamically. Each task has a checkbox next to it, and when checked, the status of that task in the MySQL database should be updated. My initial approach was to include the following code: echo "<input type=&ap ...

Using Axios with Mongoose to Update Documents in Not Working State

I'm currently working on implementing an edit feature for updating posts. My goal is to initially update a specific post by its ID and then make it more dynamic. Although I am able to successfully send a PUT request using axios, I'm not getting ...

Mastering the use of Action.Submit in adaptive cards to simulate user input

I am trying to implement MessageFactory.SuggestedActions within my "welcomeCard" adaptive card. Essentially, in my adaptive card (welcome card), I have several buttons for the user to click on, each with an Action.Submit type. { "type" ...

Conceal the element if the output of express is void

I am currently developing an app using nodejs and express. I am retrieving JSON data from an endpoint and displaying it on the page based on the values received. The issue I am facing is that if I receive a null or undefined value from the JSON data, how ...

Increase and decrease buttons using the 'keydown' event (ArrowUp and ArrowDown)

I'm seeking assistance with a school project. I currently have two buttons, one for incrementing and one for decrementing. There are four functions in total, two for clicking and two for using arrow keys. The clicking functionality works fine, but whe ...

Navigational highlighting of current page section on a one-page website

I'm struggling with adding a navigation bar feature that will highlight the current section being viewed on my website. All I want is for the currently viewed section to appear bold in the navigation bar. Check out the codepen link: HTML <na ...

Differentiating the texture of a pointCloud in three.js shaderMaterial: A step-by-step guide

Utilizing THREE.PointCloud for optimum performance, I aim to animate 100,000 objects. However, I am facing an issue with setting different textures for particles. How can I incorporate uniforms with various textures in this code? Is it possible to pass s ...

jQuery Put function failing to execute, yet successfully running with postman

I hate cluttering up Stackoverflow with these messy questions, but after hours of searching for examples, I couldn't solve the issue. Let me explain. I'm attempting to use jQuery to PUT data, and here's my code: $.ajax ({ type: "PUT", ...

Instructions for attaching an event listener to a Threejs Mesh Object with the help of threex dom events

var domEvents = new THREEx.DomEvents(camera, view.domElement); var div = document.createElement( 'div' ); div.setAttribute('data-remove','mesh1'); div.className = 'close-me'; var label = new THREE.CSS2DObje ...

Using Angular 6 to import GeoJSON into a Leaflet map

I am facing an issue while trying to import a GeoJson file into Leaflet in my Angular app version 6. Although the geojson is being successfully drawn on the leafletmap, I am encountering an error that is preventing me from building my app. Is there anyone ...

Is Dealing with Multiple AJAX Requests a Pain?

Currently, I am utilizing AJAX to retrieve a list of active streams from TwitchTV along with their viewers, updating every second. Sometimes the stream list can become quite long, so my plan is to divide the AJAX requests into 2 or 3 parts: 1) Obtain Numb ...

The Ultimate Guide to Initializing Variables in UI Router State Access

In my application, I have defined 2 states. One is "tickets" which matches /tickets ... $stateProvider // defines the states of my application .state("tickets", { // assigns properties to each state url: "/tickets", // route templateUrl: "m ...

IframeResizer.js is automatically readjusting its position to the top left corner (0,0) when a javascript event or

Within our internal web environment, I have implemented IframeResizer.js in a rather basic manner. The child page contains a table generated by a third-party application with mouseover/hidden and javascript tags associated with the TH elements (including a ...

ScriptManager is not accessible in the current ASP.Net Core Razor Page context

I'm facing an issue where I have a view (such as Index.cshtml) and a page model (like Index.cshtml.cs). In the view, there's a JavaScript function that I want to call from the OnPost() method in the page model. I tried using ScriptManager for thi ...

Issue with Node.js connect-flash functionality not functioning as expected

I'm struggling to get an error message to display using connect-flash, but I can't seem to make it work. I've attempted various methods, but none of them have been successful. Interestingly, I have another web app with a similar configuratio ...