Share on facebook
Share on twitter
Share on linkedin
Share on email

Easy Javascript Templating- Web Development

So I have been working on some web development projects that required me to create multiple html elements with dynamic data pulled from a database. So I did some searching on ways to easily template with jquery.

There are 2 essential parts to this method of templating. First you create the html markup that you wish to repeat. That is placed inside a script tag and will look something like this:

<script id=“TemplateTest” type=“text/javascript”>

<li class=‘item’>

      <h3></h3>

      <div></div>

</li>

</script>

This html markup can now be used to dynamically populate a <ul> tag with a little javascript/jquery.

First off we need to place our html template into a variable and initialize a variable called body that we will use to append to the <ul> tag later.

var template = $.trim( $(‘#TemplateTest’).html() );

var body = ;

Next we create the array that we are going to use to fill out our list items. This usually is created via an ajax call to the database but for this tutorial we will do it in the function.

var items = [[‘Infotrust’,‘Best Company Ever!’],

             [‘Analytics’,‘Yes we are a google partner’],

             [‘Training’,‘We do training too!’]];

Now we are coming to the workhorse of the templating: the $.each() function in jquery. This allows me to loop through my array and use the items inside each row to replace the placeholder data with information from the array.

$.each( items, function( index, obj )

{

body += template.replace( //ig, obj[0] )

                .replace( //ig, obj[1] );

});

Now we are ready to take our body variable and append it to <ul> tag with an ID of ‘Tutorial’.

$(‘#Tutorial’).append(body);

That’s it! Now this is a very simplified version but this format can easily be tweaked to fit all sorts of situations. Below is the code at work as well as the source code:

<!DOCTYPE html>

<html>

    <head>

        <title>Jquery Templating Source</title>

        <script id=‘TemplateTest’ type=‘template’>

            <li class=‘item’>

                  <h3></h3>

                  <div></div>

            </li>

        </script>

        <script type=‘text/javascript’ src=‘http://code.jquery.com/jquery-1.6.2.js’></script>

    </head>

    <body>

        <ul id=‘Tutorial’>

        </ul>

    </body>

    <script type=‘text/javascript’>

    $(document).ready(function()

    {

        var template = $.trim( $(‘#TemplateTest’).html() );

        var body = ”;

       

        var items = [[‘Infotrust’,’Best Company Ever!’],

                     [‘Analytics’,’Yes we are a google partner’],

                     [‘Training’,’We do training too!’]];

       

        $.each( items, function( index, obj )

        {

            body += template.replace( //ig, obj[0] )

                            .replace( //ig, obj[1] );

        });

        $(‘#Tutorial’).append(body);

    });

    </script>

</html>

Share on FacebookShare on Twitter

Submit to StumbleUpon

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email

Other Articles You Will Enjoy

Will I Lose Data Moving from Universal Analytics to Google Analytics 4?

Will I Lose Data Moving from Universal Analytics to Google Analytics 4?

As web analysts begin preparing for the fourth generation of Google Analytics, aptly named “Google Analytics 4,” a few common questions have cropped up…

InfoTrust Earns Looker Partner Certification

InfoTrust Earns Looker Partner Certification

CINCINNATI — The experienced digital analytics and customer data governance consulting team at InfoTrust is proud to announce that the organization achieved partner status…

Why Executive Teams are Resisting Google Analytics 4 (and What You Can Do to Change Their Minds)

Why Executive Teams are Resisting Google Analytics 4 (and What You Can Do to Change Their Minds)

Few can dispute that the future of analytics will be driven by machine learning and artificial intelligence. With Google’s launch of Google Analytics 4…

InfoTrust to Lead Webinar on Analytics Maturity Using Google Marketing Platform

InfoTrust to Lead Webinar on Analytics Maturity Using Google Marketing Platform

If you’re a marketer looking to sharpen your skills, or a business owner hoping to take your organization to the next level, then look…

What is a Data Clean Room?

What is a Data Clean Room?

“Data clean room” is a growing buzzword in marketing, analytics, and advertising industries. Although data clean rooms aren’t an entirely new concept, they haven’t…

Talk To Us

Talk To Us

Receive Book Updates

Fill out this form to receive email announcements about Crawl, Walk, Run: Advancing Analytics Maturity with Google Marketing Platform. This includes pre-sale dates, official publishing dates, and more.

Our website uses cookies and may collect user information to provide a good experience. Read our Privacy Policy here.

Leave Us A Review

Leave a review and let us know how we’re doing. Only actual clients, please.