2

Here is a jsfiddle of the following to play with. Say I have this JSON data:

{
    "people": [
        {
            "name": "Bob",
            "eye-color": "Green"
        },
        {
            "name": "Jill",
            "eye-color": "Blue"
        },
        {
            "name": "James",
            "eye-color": "Green"
        }
    ]
}

If I wanted to output all of the peoples' names using dust.js, I would set up the template like so:

<ul>
    {#people}
    <li>{name}</li>{~n}
    {/people}
</ul>

However, what if:

1) I only wanted to output the names of people with "Green" eyes? Is there a way to do that using conditionals in dust?

2) I only wanted to output the first two names, regardless of eye color

3) I only wanted to output the second person's name, regardless of eye color

EDIT: Adding a fourth and fifth scenario:

4) I only want to display the second and third names (ie index X to index Y)

5) I only want to output the first two names of people with green eyes (say the list of people went on much longer than the 3 shown above, including more green-eyed people that won't be displayed).

And one more question:

Say my JSON has a key / value pair like the following:

{ "tags": ["tag1", "tag2", "tag3"] }

Is there a way to use {@eq} to check if it contains "tag2" for example?

dougmacklin
  • 2,560
  • 10
  • 42
  • 69

1 Answers1

1

You can make all three work, but you will need to use Dust helpers.

1: You need the @eq helper (I'm also changing the key from eye-color to eyeColor because dashes can confuse Dust.

<ul>
    {#people}
        {@eq key=eyeColor value="Green"}
            <li>{name}</li>{~n}
        {/eq}
    {/people}
</ul>

2: You need the @lt helper, along with $idx ($idx is the index of the current item in the array, where the first item is 0).

<ul>
    {#people}
        {@lt key=$idx value=2}
            <li>{name}</li>{~n}
        {/lt}
    {/people}
</ul>

3: You need the @eq helper, along with $idx

<ul>
    {#people}
        {@eq key=$idx value=1}
            <li>{name}</li>{~n}
        {/eq}
    {/people}
</ul>
smfoote
  • 5,449
  • 5
  • 32
  • 38
  • awesome! thanks so much. 2 quick addons: 1) how would you display names 2-3 only if there were more than 3 names? and 2) what does the {~n} do? The code seems to work fine without it – dougmacklin Feb 12 '14 at 20:58
  • 1) You can nest `{@lt key=$idx value=3}` inside `{@gt key=$idx value=0}` 2) `{~n}` adds a new line, which Dust strips out by default. You probably don't need it. – smfoote Feb 13 '14 at 00:13
  • thanks smfoote! I added two more scenarios and another related question, could you take a look and let me know if those are possible? that'll be all, I promise :) – dougmacklin Feb 13 '14 at 00:16
  • 4th scenario is handled the same as the 2nd scenario, but use `@gt` instead of `@lt`. 5th scenario is probably tough to do with pure dust: it involves modifying state to know how many you have shown already. Do it server-side when creating the JSON or create a custom dust helper to do it. – Yevgeniy Brikman Feb 13 '14 at 21:51