Is there a way to use a Handlebars helper to add spaces to a camelCased key name when formatting it?

Question

Is there a way to use a Handlebars helper to add spaces to a camelCased key name when formatting it?

{{#each data}}
    <div>
        {{@key}} : {{this}}
    </div>
{{/each}}

Here's a glimpse at the structure of the data:

data: {
    maxHealth: Number,
    maxMana: Number,
    chanceToCrit: Number,
},

I currently have a setup similar to this, showing the key name and its value as intended. However, the keys are displayed in camel case format like: maxHealth, maxMana, etc.

I am interested in having the keys displayed as: max health, max mana, chance to crit, for instance. The challenge is that I cannot predict the key names and values ahead of time since they will vary each time. How can I apply a handlebar helper to format the keys accordingly?

Appreciate your assistance.

javascript templates handlebars.js

Answer 1

Answer №1

Learn how to implement a custom helper in Handlebars.

The recommended approach to (-gives a nod-) deal with this situation is by creating and registering a helper function, such as the one below:

Handlebars.registerHelper('uncamelcase', function(str) {
    return doTheUncamelCasing(str);
});

In this example, doTheUncamelCasing represents a function that you define to convert a string from camelCaseStyle to camel case style. Afterwards, make use of your new helper within the template:

{{uncamelcase @key}}

Answer 2

Learn how to implement a custom helper in Handlebars.

The recommended approach to (-gives a nod-) deal with this situation is by creating and registering a helper function, such as the one below:

Handlebars.registerHelper('uncamelcase', function(str) {
    return doTheUncamelCasing(str);
});

In this example, doTheUncamelCasing represents a function that you define to convert a string from camelCaseStyle to camel case style. Afterwards, make use of your new helper within the template:

{{uncamelcase @key}}

Is there a way to use a Handlebars helper to add spaces to a camelCased key name when formatting it?

Answer №1

Similar questions

Locate identical values in Vuejs

Struggling to accurately convert the string into a date object

Why does my computed property become undefined during unit testing of a head() method in Vue.js with Nuxt.js?

Quasar Troubles with Touch Swipe Gestures

Select a particular item and transfer its unique identifier to a different web page. Are there more efficient methods to accomplish this task without relying on href links and using the $_GET

Tips for postponing 'not found' error until the data has finished loading in Vue.js

Dealing with JSON data retrieved from a Django QuerySet using AJAX

The function window.location.reload(true) is failing to properly refresh the page

What is the best way to automatically populate additional autocomplete options after selecting certain data, and include new data if it is not already present?

Issue: Cannot access the 'map' property of an undefined value in a React Mongo DB error

The div element fails to display even after invoking a JavaScript function to make it visible

Using the Rails cocoon gem to populate numerous input fields

Force a video element to play by using React Context Provider

Differences between the scope of if statements in JavaScript and Python

Create a regular expression that matches a combination of alphabets and spaces, but does not allow for

Javascript animations failing to run sequentially

Error TS2322: The type 'Count' cannot be assigned to type 'ReactNode'

In order to make Angular function properly, it is crucial that I include app.get("*", [...]); in my server.js file

Is it possible to automatically close navigation dropdowns when the screen size changes?

Using PHP to Dynamically Add Content to HTML with AJAX