Using Handlebars.js, how do I loop data using a value from the JSON file

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?

mu is too short · Accepted Answer · 2012-10-18 17:20:12Z

6

I see two options:

Filter the data before handing it Handlebars.
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.

answered Oct 18, 2012 at 17:20

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user1552119 Over a year ago

For some unexplained reason I couldn't get if_eq working within the project I'm working on. But each_when was successful. Thanks!

SHT Over a year ago

Is it possible to add an OR condition to the results? Like if I want to check for 2 conditions to be true?

mu is too short Over a year ago

@SHT: Sure, why wouldn't that be possible? Might be a bit cumbersome in the template but you can do it.

jakubiszon Over a year ago

each_when is really useful but doesn't include the @last and @first which I need for an if inside it. Any idea how to implement that?

mu is too short Over a year ago

@Jakub Haven't used Handlebars for awhile and the documentation is rather thin so I don't know. Maybe start with the each source and figure out how it works.

Collectives™ on Stack Overflow

Using Handlebars.js, how do I loop data using a value from the JSON file

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related