jquery tmplate from a json object

Posted on 2012-09-04
Medium Priority
Last Modified: 2012-09-05
thought I should ask. Are there any tools that would create a jquery tmplate from a given json object.

I realize I'll obviously need to customize the look and feel of the template - but having a boilerplate template that would start me off would be a big help.

Question by:sanagarwl
  • 2
  • 2
  • 2
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38365558
Not sure what you mean by jQuery templates!

A json object is a string representation of data!

Can you explain more about what you mean or what you're trying to achieve

Author Comment

ID: 38365625
by jquery templates I meant http://api.jquery.com/category/plugins/templates/

I realise Json is a string representation. And, I have been using Json with ExtJs as well as JQuery and I have used templates.

I was just getting a little lazy and was hoping there was  a tool that could take a Json representation and transparently create a tmplate to render html.

And, I could then customize the tmplate to get the desired result....
LVL 45

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 1000 total points
ID: 38365714
Right. The plugin you're talking about has never got, nor ever will get past beta. It's been abandoned by the jQuery team, so I wouldn't rely on it too much.

Sorry. Can't be of any more help
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

LVL 16

Accepted Solution

Steve Krile earned 1000 total points
ID: 38367478
Not sure if I'm fully following you, but knockout.js handles converting JSON strings to HTML templates very beautifully.

In my example below, notice that the "template" is really just plain HTML with a data-bind="foreach: modelData" declaration that tells knockout to do it's magic.

<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Evan Cutler" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<title>Knockout Sample</title>
    <style type="text/css">
        body {font-family:Arial;}
    <script type="text/javascript">
        var sampleJSONData = '[{"color": "Red", "size": "Large"}, {"color": "Blue", "size": "Large"}, {"color": "Pink", "size": "Medium"}]';

        //knockout uses a single object to hold all the model elements
        var pageModel = {};
        var modelData = ko.observableArray($.parseJSON(sampleJSONData));

        $(document).ready(function () {
            //wait until the page loads and apply the binding.


    <h1>Data Template</h1>
        <tbody data-bind="foreach: modelData">
                <td data-bind="text:color"></td>
                <td data-bind="text:size"></td>


Open in new window


Author Closing Comment

ID: 38367530
thanks Guys,

Sorry I was not clearer, since we are using jquery I'll need to use jQuery tmplates or the newer avatar jsRender. If I continue to use jQuery tmplates, I was looking for a tool that at design time could create a tmplate file on the fly based on a given json.

I could then customize this given tmplate - apply styles etc.

Thanks for telling me about knockout - I plan on looking at that as well as backbone.js.
LVL 16

Expert Comment

by:Steve Krile
ID: 38367543
Both are excellent, well supported, and widely used.  I'm elbow-deep into Knockout, so that's my preference, but I hear really good things about backbone.

As for styling, yeah, knockout's got that.  ;)

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month13 days, 10 hours left to enroll

750 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question