HTML templating using JQuery

JQuery is a preeminent library of Javascript that provides you robust methods to manipulate DOM. The main aim of this article to let you know the technique of manipulating DOM and provide a wonderful user interface experience.

JQuery templating let you render JSON to HTML elements. Suppose you have a video records having a title and image in your database and you want to show a video listing in your portal just like other video channels does. Here in this blog, I will show you how to make a template and render it using JSON without using any external library like handle.js

Below is the JSON response to my API http://ashok.webkul.com/vikash/video-list.php for video listings

[
   {
      "title":"vidya vox jukebox 2017",
      "img":"https:\/\/i.ytimg.com\/vi\/QfpgUe7jsr0\/hqdefault.jpg?sqp=-oaymwEWCMQBEG5IWvKriqkDCQgBFQAAiEIYAQ==&rs=AOn4CLC69mA9WAL1i8K63zwiZSKOH1SKBg"
   },
   {
      "title":"The Best Songs Of Spotify",
      "img":"https:\/\/i.ytimg.com\/vi\/hRgLyEPBxEc\/hqdefault.jpg?sqp=-oaymwEWCMQBEG5IWvKriqkDCQgBFQAAiEIYAQ==&rs=AOn4CLCHauwQWwhKmH_JOAIajWYHNmx4Tg"
   },
   {
      "title":"10 PLANTS THAT EAT ANIMALS",
      "img":"https:\/\/i.ytimg.com\/vi\/oASwAfCsQEE\/hqdefault.jpg?sqp=-oaymwEWCMQBEG5IWvKriqkDCQgBFQAAiEIYAQ==&rs=AOn4CLCJbGlEDzRNebP7LjchnX_31ukBhw"
   }
]

Here are two way to make an interactive template

1. Using script tag

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
         //using bootrap just for design purpose 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="container">
            <script id="blog" type="template">
                <div class="col-md-3">
                    <div class="thumbnail">
                        <img src="{{image}}" class="img-rounded img-responsive" width="100%"></img>
                        <div class="caption">
                            <p>{{title}}</p>
                        </div>
                    </div>
                </div>
            </script> 
        </div>   
        <script>
         $(function() {
            $.ajax({
                url: 'http://ashok.webkul.com/vikash/video-list.php',
                success: function(content) {
                    var temp = $.trim($('#blog').html());
                    $.each(JSON.parse(content), function(index, obj) {
                        var x = temp.replace(/{{title}}/ig, obj.title).replace(/{{image}}/ig, obj.img);
                        $('.container').append(x);
                    });
                }
            })
         });
        </script>
    </body>
</html>

I have written a thumbnail inside #blog script tag that will work as a template form me. I am using {{  }} for wild card varianbles, You may put your own wildcard like what ever you want.

Consider code in line 9-18 inside ajax success function I am calling my template using #id

var temp = $.trim($('#blog').html());

replace all the wild card variables with its corresponding values from the javascript object

var x = temp.replace(/{{title}}/ig, obj.title).replace(/{{image}}/ig, obj.img);

2. Using placeholder

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="container"></div>

        <script>
         $(function() {
            $.ajax({
                url: 'http://ashok.webkul.com/vikash/video-list.php',
                success: function(content) {
                    $.each(JSON.parse(content), function(index, obj) {
                        $('.container').append(
                            `<div class="col-md-3">
                                <div class="thumbnail">
                                    <img src="${obj.img}" class="img-rounded img-responsive" width="100%"></img>
                                    <div class="caption">
                                        <p>${obj.title}</p>
                                    </div>
                                </div>
                            </div>`
                        );
                    });
                }
            })
         });
        </script>
    </body>
</html>

Thanks to javascript’s template literal back-tick (` `)  and placeholder ${ } that makes our task easier with respect to method 1. Here we just put our template thumbnail inside ajax success function and populate our placeholders with its corresponding values.