Question

This is the JSON array:

{
"profile": [
    {
        "ID": 343,
        "gender": "female",
        "from": "Olivia"
    },
    {
        "ID": 4543,
        "gender": "female",
        "from": "Meagen"
    },
    {
        "ID": 787,
        "gender": "male",
        "from": "Aaron"
    }
]
}

This works and it outputs all the objects in the array…

{{#profile}}

{{from}} {{gender}}

{{/profile}}

Output will look like…

Olivia female
Meagen female
Aaron male

But my goal is to only loop those that have a gender equal to female. Something like…

{{#profile gender="female"}}

{{from}} {{gender}}

{{/profile}}

…and get the output to look like…

Olivia female
Meagen female

I’ve been struggling trying to find an answer for a few days. Am I missing something or am I way off track?

Answer 1

I see two options:

1. Filter the data before handing it Handlebars.
2. Use a custom helper to deal with the logic inside your template.

The first one is pretty straight forward.

The second depends on how you want to do it. You could add an “if equal” helper:

Handlebars.registerHelper('if_eq', function(a, b, block) {
    return a == b
         ? block(this)
         : block.inverse(this);
});

and do this in your template:

{{#profile}}
    {{#if_eq gender "female"}}
        {{from}} {{gender}}
    {{/if_eq}}
{{/profile}}

Demo: http://jsfiddle.net/ambiguous/NnH83/

Or you could write your own iterator in various ways:

Handlebars.registerHelper('each_female', function(list, opts) {
    var i, result = '';
    for(i = 0; i < list.length; ++i)
        if(list[i].gender == 'female')
            result = result + opts.fn(list[i]);
    return result;
});

{{#each_female profile}}
    {{from}} {{gender}}
{{/each_female}}

Or a bit more general:

Handlebars.registerHelper('each_when', function(list, k, v, opts) {
    console.log(arguments);
    var i, result = '';
    for(i = 0; i < list.length; ++i)
        if(list[i][k] == v)
            result = result + opts.fn(list[i]);
    return result;
});

{{#each_when profile "gender" "female"}}
    {{from}} {{gender}}
{{/each_when}}

Demos: http://jsfiddle.net/ambiguous/E4jTs/, http://jsfiddle.net/ambiguous/AkZxN/

See the fine manual on Hash Arguments if you want something closer to your proposed syntax.