Retrieving values from an array or object using a key inside a handlebars mustache

Question

Retrieving values from an array or object using a key inside a handlebars mustache

I've been struggling to find a solution for this. Despite trying subexpressions and various suggestions from StackOverflow, none of them seem to work because they require me to know the key in advance.

Here is the object I'm working with:

{
    fields: {
        1: {
            complete: 1,
            submitted: 0
        },
        2: {
            complete: 1,
            submitted: 0
        }
}

And so on.

Within my Handlebars template, I'm iterating through an array of objects. Each object in the array includes a field_id key that corresponds to a number found in the structure above.

My goal is to access the variables within the array structure based on the current field_id being iterated. I've attempted different syntaxes like:

{{fields[(field_id)].complete}}

{{fields[{{field_id}}].complete}}

{{fields.(field_id).complete}}

{{fields.({{field_id}}).complete}}

But unfortunately, none of them are successful.

Is there a way to achieve this?

javascript arrays object handlebars.js mustache

Answer 1

Answer №1

I prefer not to create a custom helper for this task. Instead, I would opt to utilize the existing Lookup helper in conjunction with the with block helper:

{{#with (lookup fields field_id) as |field|}}
    {{field.complete}}
{{/with}}

Another approach could be to use the lookup helper with a subexpression:

{{lookup (lookup fields field_id) 'complete'}}

Answer 2

I prefer not to create a custom helper for this task. Instead, I would opt to utilize the existing Lookup helper in conjunction with the with block helper:

{{#with (lookup fields field_id) as |field|}}
    {{field.complete}}
{{/with}}

Another approach could be to use the lookup helper with a subexpression:

{{lookup (lookup fields field_id) 'complete'}}

Answer 3

Answer №2

To achieve the desired functionality, I created a custom helper method:

Handlebars.registerHelper( 'retrieveFieldValue', function ( inputData, fieldID, keyValue ) {
    var value = ( inputData[ fieldID ] ) ? inputData[ fieldID ][ keyValue ] : '';
    return value;
} );

After registering the custom helper, I utilized it within my templates like so:

{{retrieveFieldValue dataObject fieldID 'value'}}

Answer 4

To achieve the desired functionality, I created a custom helper method:

Handlebars.registerHelper( 'retrieveFieldValue', function ( inputData, fieldID, keyValue ) {
    var value = ( inputData[ fieldID ] ) ? inputData[ fieldID ][ keyValue ] : '';
    return value;
} );

After registering the custom helper, I utilized it within my templates like so:

{{retrieveFieldValue dataObject fieldID 'value'}}

Retrieving values from an array or object using a key inside a handlebars mustache

Answer №1

Answer №2

Similar questions

Ways to incorporate conditional checks prior to running class methods

Sending a string parameter from an AJAX function to a Spring controller

Lack of element content in AngularJS unit testing

Issue with react-intl not updating the placeholder value

Is there a way to condense an array containing duplicate elements by adding together their second value using lodash/underscore?

Experience a captivating Angular slideshow carousel that resets when you click on a dot button, all powered by the magical capabilities of

The JavaScript Date() string that was inserted into the database is now elegantly displayed

I continue to encounter a TypeError when using the mongoose-paginate function

Troubleshoot: React and Laravel login authentication issues

Performing string operations using an array of strings

Is it possible to use automation tools like QTP or Selenium to automate a Siebel application built on the High Interactivity framework?

How can I use React to switch the visibility of a nested component from the parent container component?

Adding a clickable button to execute code within a LeafletJS marker!

Issues with transmitting data from client to server through Socket.io

Implementation of SpotLight rotation using three.js

Vue3 - Managing the Enabling and Disabling of Text Input and Checkbox Based on Input Number

Error: We are facing an issue with new.mongoose.Schema as it is not functioning properly and

Is there a way to coordinate CSS animations with JavaScript intervals?

Preserve the location of a moveable div using jQuery

Assistance with Constructing Multi-Dimensional Array Using For Loop in PHP