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",
"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

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">
<div class="speaker">
<img src="images/{{shortname}}_tn.jpg" alt="Photo of {{name}}" />

The html code on the page for the carousel

<div id="speakerbox">
<a href="#" id="prev_btn">«</a>
<a href="#" id="next_btn">»</a>
<div id="carousel"></div>

jQuery code snippet

$(function() {
$.getJSON('data.json', function(data) {
var template = $('#speakerstpl').html();
var html = Mustache.to_html(template, data);
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?

Thanks for geeking out with me,

Signed By Femy Praseeth

Share it with your peeps:

Leave a Reply

Your email address will not be published. Required fields are marked *

Endorsed by these folks ...

I had an opportunity to work with Femy on several projects at Samsung Telecoms. Femy is a very thoughtful, creative and hard working Software Engineer. She has an immense desire to succeed and always willing to go the extra mile to get the job done, with such high quality results. I believe that Femy will be a great asset to any organization and I strongly recommend her.

David Vu Staff Engineer, Samsung Telecoms