How can I format a camel cased key name to have spaces using a handlebars helper?

Question

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

Heres what the data structure looks like:

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

I have something set up similarly to this and it is displaying the key name and the value as I want. However, the key is displaying in camel case, such as: maxHealth, maxMana, etc.

Id like the keys to display as: max health, max mana, chance to crit, in this instance, but I wont know the key names and values ahead of time, they will be random each time. How can I use a handlebar helper to format the key for me?

Thanks for your time.

So you want something like `max Health` instead of `maxHealth` — Nikhil Savaliya, Mar 01 '18 at 05:58

score 3 · Accepted Answer · answered Mar 01 '18 at 05:58

3

Check out how to create a helper in Handlebars.

The idiomatic way to (-slaps knee-) handle this is registering a helper, like this one:

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

Where doTheUncamelCasing is some function you create to transform the string from camelCaseStyle to camel case style. Then, use your new helper in the template:

{{uncamelcase @key}}

answered Mar 01 '18 at 05:58

Litty

1,856
1
16
35

hi thanks for the response. How can I go about formatting it to have spaces though? – Peeper Mar 01 '18 at 15:01
You can google the keywords "CamelCase" and "Sentence case" : https://stackoverflow.com/questions/4149276/javascript-camelcase-to-regular-form – sheriffderek Mar 01 '18 at 15:27

How can I format a camel cased key name to have spaces using a handlebars helper?

1 Answers1