How to build a carousel using JSON and template engine

This is a prototype of a project done on a client website. For their home page, the client wanted to have a events panel with a carousel of all the speakers at their upcoming event. The carousel was to include the speaker name, avatar and a short bio.

To keep the speaker information easy for the client to update, we decided to build out a JSON file with the speaker name, shortname to find the avatar image and a short bio. This time we decided to template the JSON file using mustache.js.

Using JSON and mustache templating engine, we build out the carousel.
Screenshot of the carousel build with json and mustache templating engine

What is a JSON file?
JSON stands for Javascript Object Notation. It is a text file used to exchange data between browser and server. The data is stored as javascript objects.

Example of a JSON file

{ "speakers" : [
    {
        "name":"Barot Bellingham",
        "shortname":"Barot_Bellingham",
        "reknown":"Royal Academy of Painting and Sculpture",
        "bio":"Barot has just finished his final year at The Royal Academy of Painting and Sculpture, where he excelled in glass etching paintings and portraiture. Hailed as one of the most diverse artists of his generation, Barot is equally as skilled with watercolors as he is with oils, and is just as well-balanced in different subject areas. Barot's collection entitled \"The Un-Collection\" will adorn the walls of Gilbert Hall, depicting his range of skills and sensibilities - all of them, uniquely Barot, yet undeniably different"
    }
}

Why Use Templating?

  • Templating makes working with data a breeze. It is essentially a combination of data and layout.
  • The advantage of using templating is to keep the data and how that data is presented, separate from each other.
  • It is usually used for repeating data records which are then merged with one layout and presented to the user.
  • The data is in the JSON file and the layout is specified in the template script embedded in the html.
  • Placeholders are placed in the layout to specify which parts of the data records are going to be used.
  • Both the data and the layout are fed to the templating engine to create the finished HTML layout.
  • One application that uses repeating data records and presents it using one layout is Twitter.
Using JSON and mustache templating engine, we build out the carousel.
Screenshot of how templating engine works: From Lynda.com

About Mustache Templating
Mustache is an open-source template system developed for languages like Javascript and PHP. We are using Mustache as the templating system for this project. Mustache Templates have tags as indicators for the placeholders where data will be added in the final layout.

Mustache Templating snippet

<script id="speakerstpl" type="text/template">
    {{#speakers}}
        <div class="speaker">
            <img src="images/{{shortname}}_tn.jpg" alt="Photo of {{name}}" />
            <h3>{{name}}</h3>
            <h4>{{reknown}}</h4>
            <p>{{bio}}</p>
        </div>
    {{/speakers}}
</script>

The html code on the page for the carousel

 <div id="speakerbox">
    <a href="#" id="prev_btn">&laquo;</a>
    <a href="#" id="next_btn">&raquo;</a>
    <div id="carousel"></div>
</div>

jQuery code snippet

$(function() {
    $.getJSON('data.json', function(data) {
        var template = $('#speakerstpl').html();
        var html = Mustache.to_html(template, data);
        $('#carousel').html(html);
        $('#carousel').cycle({
            fx: 'fade',
            pause: 1,
            next: '#next_btn',
            prev: '#prev_btn',
            speed: 500,
            timeout: 10000
        });
    }); 
}); 

I hope you found this article useful and interesting.

Have you used JSON or Mustache templating in your project? Do you have any thoughts on how to improve the process?

Subscribe by email
If you're an email kind of person, sign up below to get the latest blog posts in your inbox! You might get some free WordPress goodies from me:-).
I promise not to spam you or share your address.

Client Love

Femy is a very creative web designer. Not only did she provide great results for our company, she was also very fast. I love how she communicated with me every step of the way and the end results were exactly what we wanted.

Quynh Ho CFO, Cereus Corporation