Question

I’m trying to render the following list:

    var servicesList1 = {
        services : [
            {title: "Service 1 Lorem", category: "Category 1", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            {title: "Service 2 Lorem", category: "Category 1", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            {title: "Service 3 Lorem", category: "Category 1", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            {title: "Service 4 Lorem", category: "Category 1", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            {title: "Service 5 Lorem", category: "Category 2", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            {title: "Service 6 Lorem", category: "Category 2", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            {title: "Service 7 Lorem", category: "Category 2", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            {title: "Service 8 Lorem", category: "Category 2", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."}
        ]
    };

With the following template:

{{#services}}
<h3>{{category}}</h3>
<article>
    <section class="service-image {{imageClass}}"></section>
    <h4>{{title}}</h4>
    <p>{{description}}</p>
</article>
{{/services}}

But I only want {{category}} to show when the value changes.

i.e.

Category 1

Title 1
Description 1

Title 2
Description 2

Title 3
Description 3

Category 2

Title 4
Description 4

Title 5
Description 5

Title 6
Description 6

Is this doable?

Thanks,
Scott

Answer 1

You’ll have to restructure servicesList1 a bit. If you want to organize the template by category you’ll have to structure your data the same way.

var servicesList1 = {
    categories : [
        {
            name: "Category 1",
            services: [
                {title: "Service 1 Lorem", category: "Category 1", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
                {title: "Service 2 Lorem", category: "Category 1", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            ]
        },
        {
            name: "Category 2",
            services: [
                {title: "Service 3 Lorem", category: "Category 2", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
                {title: "Service 4 Lorem", category: "Category 2", imageClass : "", description: "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam interdum."},
            ]
        }
    ]
};

And the template would be something like this.

{{#categories}}
    <h3>{{name}}</h3>
    {{#services}}
        <article>
            <section class="service-image {{imageClass}}"></section>
            <h4>{{title}}</h4>
            <p>{{description}}</p>
        </article>
    {{/services}}
{{/categories}}

You could leave the category property in each service object like I did, or you could take it out. I would leave it in if you use an implementation of Mustache that isn’t the JavaScript one. For example the Coldfusion implementation has trouble traversing back up the chain. So, if you needed to show the category for each service I would leave it in, if not I would take it out.